On first render props are not pass down to handler

[luigy]

On the first pass, the handler's props are undefined. As soon as the route is mounted it runs all transition hooks needed to sync with the current URL. When this is done, it knows its props which include any static props that were passed to the Route. -- @mjackson

Apps with required props (like with fluxxor) would get warnings of missing props on first render

var routes = (
  <Route handler={FluxxorApp} flux={flux}>
    ...
  </Route>
);

"Warning: Required prop flux was not specified in FluxxorApp."

Do you need to be able to pass static props through to the handler on the first render pass? If so, we could easily make that change.

Yes 👍

maybe just transferPropsTo if no this.state.matches

render: function() {
  var props = computeHandlerProps(this.state.matches || [], this.state.activeQuery);
  var handler = this.props.handler(props);
  if (!this.state.matches) {
    return this.transferPropsTo(handler);
  }
  return handler;
}

[ryanflorence]

How does it feel if your handler is not the fluxxor app, but rather a handler that renders the fluxxor app? Gives you a chance to know you have the props.

Sent from my iPhone

On Jun 30, 2014, at 8:59 AM, Luigy Leon notifications@github.com wrote:

On the first pass, the handler's props are undefined. As soon as the route is mounted it runs all transition hooks needed to sync with the current URL. When this is done, it knows its props which include any static props that were passed to the Route. -- @mjackson

Apps with required props (like with fluxxor) would get warnings of missing props on first render

var routes = (

...

);
"Warning: Required prop flux was not specified in FluxxorApp."

Do you need to be able to pass static props through to the handler on the first render pass? If so, we could easily make that change.

Yes

maybe just transferPropsTo if no this.state.matches

render: function() {
var props = computeHandlerProps(this.state.matches || [], this.state.activeQuery);
var handler = this.props.handler(props);
if (!this.state.matches) {
return this.transferPropsTo(handler);
}
return handler;
}
—
Reply to this email directly or view it on GitHub.

[luigy]

It feels better and even more obvious once server rendering lands

[joecritch]

A demo of how to do what @rpflorence has mentioned above (using an intermediary component to check for the existence of this.props.flux). https://gist.github.com/joecritch/0bf7855bfc58df8c7f06. Not sure if there's a better way.