How do I pass Redux props to a separate component in a different Route with React Router v4?

Question

I'm creating a real time chat app with react, react router v4 and redux. The problem is that, as you may know, react router v4 changes a lot of stuff and nesting routes is not working for me.

So I have this code with a nested route that is not working:

<Route path='/' component={App}>
    <Route path="/user" component={AddUser}/>
</Route>

It's giving me this error Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored.

Where component={App}, in the first <Route path='/' is a redux connect:

const App = connect(mapStateToProps, mapDispatchToProps)(Header)

So my component App has all the the props I need. All works fine except by the fact that I need to pass those props from App to the nested route component AddUser.

How do I pass the redux props to a separate component in a different Route?

Possible duplicate of [Nested routes with react router v4](https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4) — Mayank Shukla, Jun 05 '17 at 17:52
check this also: https://stackoverflow.com/questions/42254929/how-to-nest-routes-in-react-router-v4 — Mayank Shukla, Jun 05 '17 at 17:53
That question didn't solve my problem because it's not clear enough for me. I answered my own question below. — Merunas Grincalaitis, Jun 05 '17 at 17:55

score 1 · Accepted Answer · answered Jun 05 '17 at 17:57

With react-router v4 when we need nested routes, we don't nest Routes. Instead, we put them inside nested components. You can read about this more here: Nested routes with react router v4

In your case, you can put your "/user" route inside the App component and then use render instead of component. So you can pass your App props to AddUser as usual.

<Route path='/' component={App}/>

App.js

class App extends Component{
  //...
  render(){
    return(
      //....
      <Route path="/user"
        render={() => <AddUser myProp={this.props.myAppProp}/>}/>
      //....
    )
  }
}

score 0 · Answer 2 · answered Jun 05 '17 at 17:53

I found a solution reading this blog post: https://medium.com/@5XvYrLT7/react-server-side-rendering-with-react-router-3-x-74cf87919b3

With react-router v4 you don’t do this any more, don’t nest :

<Route component={App}>
    <Route component={Index} />
    <Route component={About} />
</Route>

You do it like this now. App embeds your routes as-is:

<App>
    <Switch>
        <Route exact path="/" component={Index} />
        <Route path="/about" component={About} />
    </Switch>
</App>

How do I pass Redux props to a separate component in a different Route with React Router v4?

2 Answers2