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

Question

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= ?

Answer 1

In order to pass the match object you need to deconstruct the object passed as parameter to the render callback like this:

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

You can also get the other objects, here's a list of the objects passed:

• history
• location
• staticContext
• match

Or you could just pass the whole object, and deconstruct in the recipient component

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

Answer 2

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} />
} />