当使用Route render prop而不是Route component prop时，如何访问react-router-dom 4中的url args？

Question

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

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

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（在这种情况下应为12345）访问activityId。 在PageActivity中，我从阅读无数文档页面时并未收到我想的this.props.params 。

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

Answer 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中传递。