Easily "Passing Props" from Route to its Component

[Manuelandro]

There are a lot of request about passing props from Route to Component (ex #615 (comment))
This provide access to everything we pass from the Route component without broken its kinda of render

[pshrmn]

The current approach is deliberate. If you need to pass props to the component, you should use render instead of component.

[Manuelandro]

The current approach is deliberate. If you need to pass props to the component, you should use render instead of component.

@pshrmn
This is not really useful when you have to deal with something like dynamic components
Just a case for example:

{routes.map(props => ( <Route {...props} /> ))}

[hamedmam]

#4105 (comment)

I found this as a right approach in Router 4.0 but I couldn't get it to work since I am using Link and I am trying to pass props from the component that Link exists in to the path !
Can someone give me an example to what I am trying to do

[Macmee]

You can do this:

<Route exact path="/abc" render={props => <TestWidget someProp="2" {...props} />} />

and what I do is I actually spread {...props.match.params} because then on TestWidget you can access the URL parameters with just this.props.urlVariableHere as opposed to this.props.match.params.urlVariableHere for a route setup like /abc/:someUrlQueryBasedVariable/morestuff.

(note to googlers; the above works on v4)

My opinion on the above is that this is very ugly. I would prefer if React directly forwarded on properties assigned to Route straight to the Component itself.

What's more, I dislike how url parameters are stored all the way over in props.match.params, because if you use typescript, then in your Component declaration you cannot have something like:

interface TestWidget {
  someUrlQueryBasedVariable: string
}

You would hope this property would exist at this.props.someUrlQueryBasedVariable but in reality is at this.props.match.params.someUrlQueryBasedVariable which I find very cumbersome to deal with.