如何在反应路由器的路由组件中使用渲染时传递匹配（v4）

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} />} />

我收到错误，因为匹配不再传递给道具。

如何使用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} />} />

Answer 2

补充@juliangonzalez（好的）答案：

最好让您的组件不了解“路由”，因此，您应该执行以下操作：

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