reactjs - 在 React Router (v4) 的 Route 组件中使用渲染时如何传递匹配

Question

当声明这样的路由时:

App.js

<Route path="/:id" component={RunningProject} />

我可以像这样在RunningProject.js中获取id参数

constructor(props){
    super(props)
    console.log(props.match.params.id);
}

但是当像这样声明路由时

<Route path="/:id" render={() => <RunningProject getProjectById={this.getProject} />} />

我收到错误，因为匹配不再传递到 Prop 中。

如何将匹配对象传递到 props使用render=而不是component= ？

Answer 1

为了传递匹配对象，您需要解构作为参数传递给渲染回调的对象，如下所示:

<Route path="/:id" render={({match}) => <RunningProject getProjectById={this.getProject} match={match} />} />

您还可以获取其他对象，这里是传递的对象列表:

• history
• location
• staticContext
• match

或者您可以只传递整个对象，并在接收者组件中解构

<Route path="/:id" render={(obj) => <RunningProject getProjectById={this.getProject} obj={obj} />} />