How to pass the match when using render in Route component from react router (v4)

Viewed 8606

When declaring a route like this:

App.js

<Route path="/:id" component={RunningProject} />

I can obtain the id param in RunningProject.js like this

constructor(props){
    super(props)
    console.log(props.match.params.id);
}

But when declaring the route like this

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

I get an error because match no longer get passed into the props.

How can I pass the match object into the props using render= instead of component= ?

2 Answers

In complement of @juliangonzalez (good) answer:

Better to make your component not "route" aware, so instead of passing React match object you should do:

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