道具中缺少位置（ReactJS）

Question

我是 reactjs 的新手，我正在一步一步地学习。我遇到了一个问题，那就是当我尝试访问道具中的位置参数时，它返回给我undefined。我试图找到解决方案，但大多数人都写过我必须在路由器中添加我的组件，但我将它包装在路由器中，但我仍然无法访问位置参数

export const abcdContainer = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(abcd));

我正在尝试访问 and 组件中的位置参数，但问题是其中没有位置参数。谁能告诉我这是怎么回事

如果有人知道出了什么问题，请告诉我我已经花了半天时间，但我无法弄清楚

使用 URL 添加的代码和版本

路由器版本 => 2.8.1

网址：http://localhost:3000/somePage?someParam=cm9oYW5qYWxpbHRlYWNoZXJAZ21haWwuY29t

abcdContainer.js

const mapStateToProps = (state, ownProps) => {
   // some code over here
}

const mapDispatchToProps = (dispatch, ownProps) => {
           // some code over here
};

export const abcdContainer = withRouter(connect(
    mapStateToProps,
    mapDispatchToProps
)(abcd));

abcd.jsx

class abcd extends Component {

    constructor(props, context) {
        super(props, context);
        this.state = {
           // setting state over here
        };
    }

    abcdFunction(){
        if (this.props.location.query.someParam !== undefined){ // trying to extract someParam value  from location
            // some code over here
        }
    }

    render() {
        // some code over here   
    }
}


export default CSSModules(abcd, styles, { allowMultiple: true });

这是流程。路由器重定向到容器，然后容器重定向到真正的组件

Route.js

export const Routes = ({ store }) => (
    <Provider store={store}>
        <Router history={browserHistory}>
            <Route path="/" component={aContainer}>
                <IndexRoute component={IContainer} />
                // some routes    
                <Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />
               // some routes
            </Route>

           // some routes
        </Router>
    </Provider>
);

Routes.propTypes = {
    store: React.PropTypes.object.isRequired,
};

Answer 1

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />

如果您使用内联箭头函数来渲染组件，为什么不直接将道具传递给组件？那么您将不需要withRouter()。像这样：

<Route path="/openAbcd" component={props => (<abcdContainer caller="aaaaaaa" {...props} />)} />

Also the docs of react-router v2.8.1 says about withRouter():

包装另一个组件以提供 props.router 的 HoC（高阶组件）。

它不提供location，而是提供router 作为道具。我建议您将react-router 更新到 v4 或至少 v3。

编辑：“但是为什么没有隐式插入道具？”：

React 知道两种类型的组件。 Stateless functional components and class-based components。功能组件是接受带有数据的单个 props 对象参数并返回 React 元素的函数。再看看这行代码：

<Route path="/openAbcd" component={() => (<abcdContainer caller="aaaaaaa" />)} />

您将箭头函数 () => (<abcdContainer caller="aaaaaaa" />) 传递给您的 <Route> 元素，这是一个函数组件的内联定义，该函数以 props 作为参数并返回渲染的 React 元素，在这种情况下，这是您的 <abcdContainer> .但正如您所见，您通过用空括号定义它省略了函数中的 props 参数：() => (<AComponent />)。 React 不会自动将 props 传递给在功能组件内呈现的子组件。将 <abcdContainer> 包装到内联功能组件中时，您需要自己负责将 props 传递给它。

但是，如果您将基于类/功能组件的类/变量传递给您的 <Route> 元素的 component 道具，就像您在其他路线中所做的那样，那么它将将此组件呈现为隐式传递道具是因为它没有包装在功能组件中：

// this will directly render <aContainer> and pass the props to it
<Route path="/" component={aContainer}>

您所做的是创建一个“功能性未命名包装组件”，它不接受任何道具，也不会进一步向下传递任何道具。

请注意，您不应广泛使用withRouter()。该 HOC 仅用于将路由器注入到组件中，这些组件不会被匹配的路由本身渲染，例如更深入您的组件树。在您的情况下，您不需要它。