当使用 Route 渲染道具而不是 Route 组件道具时，如何访问 react-router-dom 4 中的 url args？答案

【问题标题】：How do you access url args in react-router-dom 4 when using Route render prop instead of Route component prop?当使用 Route 渲染道具而不是 Route 组件道具时，如何访问 react-router-dom 4 中的 url args？
【发布时间】：2017-04-01 02:57:07
【问题描述】：

我正在使用 react-router-dom v 4.0.0。

在渲染我的反应路由器的顶级<App /> 组件中，我有三个路由。前两个按预期工作，第三个没有。

render() {
    const pageMain = (
        <PageMain token={this.state.token} />
    );
    const pageActivity = (
        <PageActivity
            projectActivities={this.state.projectActivities}
            projectActivitiesMap={this.state.projectActivitiesMap} />
    );
    return (<Router>
        <div>
            <Route
                path="/"
                component={PageSplash}
            />
            <Route
                path="/app"
                render={props => pageMain}
            />
            <Route
                path="/activity/:activityId/"
                render={props => pageActivity}
            />
        </div>
    </Router>);
}

当我访问 www.example.com/ 时，路由器按预期将我定向到我的 PageSplash 组件。

当我转到 www.example.com/app 时，路由器按预期将我定向到我的 PageMain 组件。此外，在我的 PageMain 组件中，我可以按预期访问this.props.token。

当我转到 www.example.com/activity/12345/ 时，路由器按预期将我定向到我的 PageActivity 组件。在我的 PageActivity 组件中，我可以按预期访问this.props.projectActivities 和this.props.projectActivitiesMap。但是，我希望能够从 url 访问 activityId，在这种情况下应该是 12345。在 PageActivity 中，我没有像我想象的那样收到 this.props.params，因为我阅读了无数页的文档。

我开始使用像我的第一个一样的简单路线。然后我需要将数据从我的顶级组件传递到 /app 路由，所以我开始使用 <Route /> render 属性而不是 component 属性。这工作正常。然后我需要传递数据并访问 url 参数。我可以访问传递的道具，但我的 PageActivity 组件没有收到 params 道具。如何访问 PageActivity 组件中的 activityId？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

我想出了如何做到这一点。我需要内联我的 PageActivity 组件，并添加{...props}。有问题的路线现在看起来像这样：

<Route path="/activity/:activityId/" render={props => (
    <PageActivity
        projectActivities={this.state.projectActivities}
        projectActivitiesMap={this.state.projectActivitiesMap}
        {...props}
    />
)} />

另外，在 react-router-dom 4.0.0 中，页面参数在 this.props.match.params 中传递。

【讨论】：