react-router（v4）的Route组件中使用渲染时如何传递匹配答案

【问题标题】：How to pass the match when using render in Route component from react router (v4)react-router（v4）的Route组件中使用渲染时如何传递匹配
【发布时间】：2017-05-25 20:05:32
【问题描述】：

当这样声明路由时：

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

我收到一个错误，因为 match 不再传递到 props 中。

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

【问题讨论】：

标签： reactjs react-router

【解决方案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} />} />

【讨论】：

【解决方案2】：

补充@juliangonzalez（好）答案：

最好让你的组件不知道“路由”，所以你应该这样做而不是传递 React 匹配对象：

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

【讨论】：