CODEWITHSUNDEEP
reactjsreact-router
juliangonzalez
juliangonzalez

Reputation: 4381

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

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

Upvotes: 14

Views: 9110

Answers (2)

Thomas Decaux
Thomas Decaux

Reputation: 22711

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

Upvotes: 2

juliangonzalez
juliangonzalez

Reputation: 4381

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

Upvotes: 28

Related Questions