How to convey a match when using rendering in a Route component from a responsive router (v4)

Question

When declaring a route as follows:

App.js

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

I can get id parameter in RunningProject.js, like this

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

But when declaring a route like this

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

I get an error because the match is no longer passed to the details.

How to pass a matching object in propsusing render=instead component=?

Answer 1

To pass a conformance object, you need to deconstruct the object passed as a parameter to call the renderer as follows:

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

You can also get other objects, here is a list of transferred objects:

• history
• location
• staticContext
• match

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

Answer 2

@juliangonzalez () :

, " ", React :

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