Paulos3000 Paulos3000 - 10 months ago 58
React JSX Question

How to pass props to child components in react-router tree

I have a route model made up in react-router. I want to know how to pass props between my components in this setup - is it possible?

<Route path='/' component={Layout}>
<IndexRoute component={Home} />
<Route path='/users' component={Users} />
<Route path='/posts' component={Posts} />
<Route path='/albums' component={Albums} />
<Route path='/about' component={About} />

Say for example, I initialise my state in the Layout component (the idea being that all it's children can access the state); how would I pass the state value to them, and also trigger functions in the parent component passed down via props?

Is this possible, as it would be if the component were directly nested in it's parent, or am I thinking about this in the wrong way with regards to routing? If so, is there an alternative solution?

Any help appreciated

Answer Source

Although it is possible to pass state in a react-router tree, managing state across multiple components very quickly becomes unwieldy when you have a medium to large application, which is exactly what Redux was created to address.

So, to anyone facing this problem...


Enough said.

This free course from Wes Bos put me on the right track and I highly recommend it: