React Router-通过道具将匹配传递给使用Route :: render渲染的组件

Question

此路线使用渲染道具来渲染带有道具的子组件：

<Route to='/path/:id' render={ () => (<ChildComponent myProp={myProp} match={this.props.match}/>)} />

但是传递的match的版本似乎与父组件的路由状态“匹配”，因此没有在id下注册match.route.params。

我发现类似这样的解决方案可能会同步路由状态：

<Route to='/path/:id' render={ () => (withRouter(<ChildComponent myProp={myProp} />))} />

但这只会导致一个错误，表明子组件不能是函数...

解决这个问题的正确方法是什么？

Answer 1

由于要传递match参数，因此不应传递对父级可用的一个，而应传递与Route相关的一个。 render prop回调会收到您可以传递的Router Props

<Route to='/path/:id' render={(routerProps) => (<ChildComponent {...routerProps} />)} />

或者您可以简单地写

<Route to='/path/:id' component={ChildComponent} />

在这种情况下，它将把相关的路由器道具传递给组件。

，在子组件中，您可以访问匹配道具，例如

this.props.match.params.id