Question

例如：

import SomeComponent...

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

如何将内容传递给SomeComponent，以便我可以通过this.props.xxx在组件中访问它？

Answer 1

试试这个：

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

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

更新

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

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

根据react docs：

当你使用组件（而不是渲染或子）时 router使用React.createElement从中创建一个新的React元素给定的组件。这意味着如果你提供内联函数组件属性，您将在每次渲染时创建一个新组件。这导致现有组件卸载和新组件组件安装而不是仅更新现有组件。使用内联函数进行内联渲染时，请使用渲染或儿童道具（下图）。

将props传递给react-router v4中的路由器组件

1 个答案: