How to pass props to react-router 4 components?

Question

Id like to use my app entry point as a global state store. Passing info down to children as props.

Using react-router 4, how can I send prop data down to the rendered components. In a similar fashion to this:

<Route Path=“/someplace” component={someComponent} extra-prop-data={dataPassedToSomeComponent} />

I’ve seen some janky workarounds for older versions of react-router, that appear to be deprecated.

What is the correct way of doing this in v4?

Possible duplicate of [react-router - pass props to handler component](https://stackoverflow.com/questions/27864720/react-router-pass-props-to-handler-component) — Andrea Carraro, Nov 12 '17 at 21:48
I saw that one. However, the excepted answer doesn’t work, as my props need to come from state in the component defining the routes. Defining the wrapper components outside the scope of the RoutesComponent doesn’t help. Maybe I’m missing something there? — Vinnie James, Nov 12 '17 at 21:50
https://stackoverflow.com/a/43299633/2902821 doesn't fit your case? — Andrea Carraro, Nov 12 '17 at 21:55

score 5 · Answer 1 · edited Jul 08 '18 at 15:21

5

You can pass in a function to the render prop instead of passing in the component directly to the component prop.

<Route path="/someplace" render={() => <SomeComponent props={} />} />

You can read more here.

edited Jul 08 '18 at 15:21

Robin Venneman

383
1
7

answered Nov 12 '17 at 21:43

Raj

87
3

Yes! I now remember doing this with another project. I’ll give it a whirl when I get home. Thanks – Vinnie James Nov 12 '17 at 21:44
1

@Raj consider adding a reference to the [docs](https://reacttraining.com/react-router/web/api/Route/render-func) – Sagiv b.g Nov 12 '17 at 21:53
1

added the reference! – Raj Nov 12 '17 at 21:58
3

Actually, better to use the `render` prop because if you pass a function to a route's `component` prop it will recreate the component (unmount old and mount new) instead of updating its props. This is also mentioned in the documentation https://reacttraining.com/react-router/web/api/Route/component – Robin Venneman Feb 08 '18 at 12:41
2

The EDIT section of the answer contains a really bad advice. Following it cost me several hours today. Passing lambda as `component` caused `componentWillReceiveProps` not firing (React 16.2). Probably the component was constantly recreated, as @RobinVenneman described. I should have read his comment. – Mikhail Batcer Jul 06 '18 at 16:03
Ok I've removed that additional edited suggestion because it would cause the component to unmount and mount again. – Robin Venneman Jul 08 '18 at 08:44

score 2 · Answer 2 · answered Jan 22 '18 at 20:06

2

And to add to the above answer, if you want the routing properties accessible to the component you need to include those. Now when the router activates "SomeComponent", the component will get all the routing props plus the extra param(s) - in this example "param".

<Route path='/someplace' component={(props) => <SomeComponent param="yo" {...props}/>} />

answered Jan 22 '18 at 20:06

Alan Baer

29
1

1

Before following this, please see comments by RobinVenneman and me to the accepted answer. – Mikhail Batcer Jul 06 '18 at 16:05

score 1 · Answer 3 · answered Sep 20 '18 at 15:10

Technically there is 2 ways to do it.

The first one (not the most efficient) is to pass an inline function to the component prop:

<Route 
  path=“/someplace” 
  component={(props) => (
    <SomeComponent {...props} extra-prop-data={ dataPassedToSomeComponent } />
  ) />

The second one is the best solution. To prevent create a new component on every render like on the first exemple, we pass the same inline function but this time to the render prop:

<Route 
  path=“/someplace” 
  render={(props) => (
    <SomeComponent {...props} extra-prop-data={ dataPassedToSomeComponent } />
  ) />

How to pass props to react-router 4 components?

3 Answers3