时间戳

首页 > 解决方案 > React Router - 通过道具将匹配传递给使用 Route::render 渲染的组件

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

问题描述

这条 Route 使用 render prop 来渲染一个带有 props 的子组件：

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

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

我想像这样的一些解决方案可能会同步路由状态：

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

但这只会导致错误说子组件不能是函数......

处理这个问题的正确方法是什么？

标签： reactjsreact-router

解决方案

由于要传递 match 参数，因此不应传递父可用的参数，而应传递与 Route 相关的参数。渲染道具回调接收您可以传递的路由器道具

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

或者你可以简单地写

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

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

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

this.props.match.params.id

推荐阅读