transfer props to handler to fix state propagation

[sterlingwes]

Hi Andrey - I found that passing props from the Router wasn't reflecting the state of the parent as it updated. Ie:

<Locations user={this.state.user}>
<Location path="/" handler={IndexHandler}>
</Locations>

Changes to the user state aren't being reflected in the user prop for IndexHandler.

transferPropsTo the handler directly fixed this issue for me. Is there a better way to go about this? Also, why the React.Div between the main Router component and the matched Handler? Seems redundant since the Handler will be a single root element and actual React component anyways?

Thanks again

[andreypopp]

If you want to pass props to the handler, you should assign props directly to location descriptor:

<Locations>
  <Location user={this.state.user} path="/" handler={IndexHandler}>
</Locations>

I understand that this can become cumbersome when you want to pass the same prop to all location handlers but this is no different when you are working with React components, you just that with iteration (for example using map):

var routes = [{handler: MainPage, path: '/'}, ...];
var locations = routes.map(function(r) {
  return Location({path: r.path, handler: r.handler, user: this.state.user})
}, this)
<Locations>{locations}</Locations>

Also, why the React.Div between the main Router component and the matched Handler? Seems redundant since the Handler will be a single root element and actual React component anyways?

This is for historical reasons mainly. I might change that in 1.0.0.

[sterlingwes]

I did start out passing props directly to the Location in question, but ran into the same issue addressed above: changes to state were not passed along to the child props. The attached pull req fixed this issue for me, and passing the state as props in Locations was what worked and also convenient.

It seems to me that the React.Div does not lead to those props being transferred properly to the Location within. I can access the initial prop values, but any changes that should be passed from parent via state are not accessible from that Location. Hope that makes sense?

[andreypopp]

It seems to me that the React.Div does not lead to those props being transferred properly to the Location within.

props from Location are assigned to handler during its instantiation — https://github.com/andreypopp/react-router-component/blob/master/lib/matchRoutes.js#L77 — so Raect.DOM.div can't interfere with that

I can access the initial prop values, but any changes that should be passed from parent via state are not accessible from that Location.

That's strange. How do you update the state? Using setState({user: ...}) of a component which "owns" the <Locations> router?

[andreypopp]

@sterlingwes yeah, I see the problem, this is a bug.

[sterlingwes]

OK, sorry was working on getting you an example repro. This pull was the quick fix that worked for me.

Separately, I've been thinking about some bigger changes including enabling "app-like" route transitions which would probably necessitate each route being instantiated in the DOM whether active or not in order to be smooth & make efficient use of the DOM (CSS hiding, etc). Though maybe React compensates for that, I'm not up to speed on the internals there. Not sure if that's on your roadmap at all, but I can update you on my fork if you like?

[andreypopp]

Just published a fix in 0.9.2. Thanks for bug report!

Separately, I've been thinking about some bigger changes including enabling "app-like" route transitions which would probably necessitate each route being instantiated in the DOM whether active or not in order to be smooth & make efficient use of the DOM (CSS hiding, etc).

I'm interested in that! Probably that shouldn't be the default behaviour but as a some alternative router implementation.

[sterlingwes]

Thanks for the quick fix!