位置缺少道具（ReactJS）

Question

我是一种新的reactjs，我正在一步一步学习。我遇到了一个问题，那就是当我尝试访问道具中的位置参数时，它返回我undefined。我试图找到解决办法，但大多数人都写我要补充我的组件中的路由器，但我包裹它在路由器，但仍，我没有获得位置参数

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

我试图访问和组件中的位置参数，但问题是它中没有位置参数。谁能告诉我它是什么，是怎么了？

请，如果有人知道什么是错了，请告诉我，我已经花了我半天，我无法弄清楚

代码和版本添加了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" />)} /> 

如果您使用内联Arrow功能来呈现你的组件你为什么不只需将道具直接传递给组件？那么你将不需要0​​。像这样：

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

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

甲HOC（较高阶分量），该包装另一个组件提供props.router。

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

编辑：“但是为什么这些道具不被隐式插入？”：

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

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

您通过箭头功能() => (<abcdContainer caller="aaaaaaa" />)您<Route>元件，它的功能组件的内联定义，需要props作为参数，并返回一个呈现阵营元素，在这种情况下，这是您的<abcdContainer>。但正如你所看到的，通过用空的括号定义它，你省去了函数中的道具参数：() => (<AComponent />)。 React不会自动将道具传递给在功能组件内呈现的子组件。将<abcdContainer>包装成内联功能组件时，您有责任自行将道具传递给它。到component道具你<Route>元素的

但是，如果你通过你的类/变量类基/功能组件就像你在你的其他途径做了那么它将呈现此组件的隐含传递的道具，因为它不裹功能组件：

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

你的所作所为是创造一个“无名功能的包装部件”，不采取任何道具，也没有通过任何道具进一步下跌。

请注意，您不应该广泛使用withRouter()。这个HOC只是在那里注入一个路由器到组件中，而这些组件并不是通过匹配路由本身呈现的，而是例如更深入你的组件树。在你的情况下，你不需要它。