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

Question

I am using react-router-dom v 4.0.0.

In my top-level <App /> component that renders my react router, I have three routes. The first two work as expected, the third one does not.

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>);
}

When I go to www.example.com/ , the router directs me to my PageSplash component as expected.

When I go to www.example.com/app , the router directs me to my PageMain component as expected. Further, in my PageMain component, I have access to this.props.token as expected.

When I go to www.example.com/activity/12345/ , the router directs me to my PageActivity component as expected. In my PageActivity component, I have access to this.props.projectActivities and this.props.projectActivitiesMap as expected. However, I'd like to be able to access the activityId from the url, which should be 12345 in this case. In PageActivity, I don't receive this.props.params as I thought, from reading countless pages of documentation.

I started by using simple routes like my first one. Then I needed to pass data from my top-level component to the /app route, so I begin using the <Route /> render prop instead of the component prop. This works fine. Then I needed to pass data and access the url param. I can access the passed props, but my PageActivity component isn't receiving a params prop. How do I access the activityId in my PageActivity component?

Answer 1

I figured out how to do this. I needed to inline my PageActivity component, and add {...props} . The problematic route looks like this now:

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

Also, in react-router-dom 4.0.0, page params are passed in this.props.match.params .