Question

我正在使用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 param。我可以访问传递的道具，但我的PageActivity组件没有接收参数道具。如何访问PageActivity组件中的activityId？

Answer 1

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

{...props}

此外，在react-router-dom 4.0.0中，页面参数在<Route path="/activity/:activityId/" render={props => ( <PageActivity projectActivities={this.state.projectActivities} projectActivitiesMap={this.state.projectActivitiesMap} {...props} /> )} />中传递。

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

1 个答案: