React-router: How to pass variable to the component?

[jr69]

So this is the routes I have:

<Route path="/" component={ App }> <Route path="/login" component={Login}/>

I can do something like this:
<Route path="/login" component={Login} foo={true}/>
And have a variable in the Login Component. How would I go about passing a variable/state so that the App component gets it? I have some things in App that I don't want re-rendered, so I will just use states to change it, rather than use passing in custom components (which will cause re-draw and flickering and I don't want that)

edit:

For example:

<Route path="/" component={ App }> <Route path="/login" component={Login} someVariableThatAppComponentShouldHave={true}/>

Is there a way so that when the route 'Login' is loaded, a variable can be passed to the component 'App'? The only other way I can think of doing this is checking the current route in App. But I don't really want to rely on using strings, because urls can be easily changed and that can lead to more messy errors, so im looking for a variable solution that doesn't require any dependency on the url/path (which can easily be changed by accident)

[mjackson]

Sure, instead of using the component prop, use render instead:

<Route path="/" render={props => (
  <App {...props} somethingElse="here"/>
)}/>

Just be sure to pass along the props the router gives you (i.e. the {...props} above) and you should be good to go ;)

[jr69]

This gives me an error: Unexpected error. Where would my Login component go?