Pass props created in app.jsx level through react router

Question

I have an react/redux app where I am trying to pass some props into my components. Right now in my app.jsx I just have a pretty straight forward render like so :

ReactDOM.render(
  <Provider store={store}>
    <Router
      history={browserHistory}
      >
      {routes}
    </Router>
  </Provider>,
  rootElement
);

the {routes} just looks like

export default(
  <Route component={App} path="/">
    <Route component={MyComponent} path="/" />
  </Route>
);

And I just want to pass some props to that App component. The first thing I tried was like so :

ReactDOM.render(
  <Provider store={store}>
    <Router
      history={browserHistory}
      passedProp={passedProp}
      >
      {routes}
    </Router>
  </Provider>,
  rootElement
);

So I am trying to effectively get this.props.passedProp inside of that App component. I tried googling around and a few other things and can't seem to come up with the correct solution. Is there a correct way of doing this? Thanks!

Answer 1

You would do it in your mapStateToProps function of AppComponent.jsx (assuming in your routes you use import App from './AppComponent.jsx' . We could provide more help if you told some more details of where passedprop comes from and how it's used.

Here's the react-router docs on what you can do in <Route> : https://github.com/ReactTraining/react-router/blob/master/docs/API.md#route

Answer 2

react-router 4

you can pass props directly to the component using the Match component and the component prop.

The code example below is passing the custom props label and title to the Game component.

const route = {
    pattern: '/game',
    label: 'Star Wars Trivia',
    title: `${siteTitle} - Star Wars Trivia`,
    component: Game
  };
<Match { ...route } key={ i } render={(props) => <route.component {...props} routes={route.routes}/>} />

for a working example app, checkout react-lego and the routes.js on the react-router-4 branch