将道具传递到react router v4中的路由器组件[重复]

Question

例如：

import SomeComponent...

<Router>
    <Route path='/' component={SomeComponent} />
</Router>

我如何传递一些东西到某些组件，以便我可以通过this.props.xxx在组件中访问它？

Answer 1

试试这个：

<Router>
    <Route path='/' component={(props) => 
        (<SomeComponent value={this.state.value} {...props} )/>} />
</Router>

注意，如果您想访问组件中的路由属性（如匹配、位置或历史，如组件代码中的this.props.history），您需要传递... props。

更新：

出于性能原因，在这种情况下使用渲染可能更好，比如：

 <Router>
        <Route path='/' render={(props) => 
            (<SomeComponent value={this.state.value} {...props} )/>} />
    </Router>

根据react文件：

使用组件（而不是渲染或子组件）时，路由器使用React.createElement从给定组件创建新的React元素。这意味着，如果为component属性提供内联函数，则每次渲染时都会创建一个新组件。这将导致现有组件卸载和新组件安装，而不仅仅是更新现有组件。使用内联函数进行内联渲染时，请使用“渲染”或“子对象”属性（如下）。