transitionTo does not pass props to routes of depth higher than 1

[AleCaste]

Hello If I have two components Home and About, and I have my routes defined the following way:

<Router {...this.props} platform="android" defaultTransition={Transitions.None}>
  <IndexRoute name="home" component={Home} />
  <Route name="about1" component={About} />
</Router>

Then on the Home component I can call this.context.transitionTo('about1', { text:'Hello' }); and when doing so the About component is mounted and within its constructor I call console.log(props) and see the expected result: { text: 'Hello' }

BUT... if I have routes defined with a depth higher than one...

<Router {...this.props} platform="android" defaultTransition={Transitions.None}>
  <IndexRoute name="home" component={Home} />
  <Route name="about1" component={About} >
    <Route name="about2" component={About} >
      <Route name="about3" component={About} >
        <Route name="about4" component={About} />
      </Route>
    </Route>
  </Route>
</Router>

and from the Home component I call this.context.transitionTo('about1/about2/about3/about4', { text:'Hello' });, the About component is mounted but I don't get the expected props object when calling console.log(props) from the constructor. I get something much more complex like:

{ children:
  { '$$typeof': 60103,
    type: { [Function] displayName: 'RouteWrapper' },
    key: null,
    ref: null,
    props:
     { parent:
        { [Function: About]
          contextTypes:
          ...
... etc ...

I should get { text: 'Hello' } since that is the object I am giving to the transitionTo method, but is not happening. Is this a bug????

Thanks! Alex

[jcgertig]

Can you update to the most recent version and test

[AleCaste]

Hello, I am trying to test this issue but after upgrading to rn-router v2.4.2 I am unable to run a really simple app using your router (I am using react-native v0.24.1).

'use strict';
const React = require('react-native');
const {
  AppRegistry,
  Component,
  Text,
} = React;
const ReactRouter = require('rn-router');
const { Router, IndexRoute, Route, Transitions } = ReactRouter;
// ----------------------------------------------------------------------------
var Sample = React.createClass({
  render: function() {
    return (<Text>Hello</Text>);
  }
});
var Routes = React.createClass({
  render: function() {
    return (
      <Router {...this.props} defaultTransition={Transitions.Fade}>
        <IndexRoute name="login" component={Sample} />
      </Router>
    );
  }
});
class App extends Component {
  constructor(props, context) {
    super(props, context)
  }
  render() {
    return (
      <Routes platform="android" />
    );
  }
}
// ----------------------------------------------------------------------------
AppRegistry.registerComponent('react_native_app1', () => App);

When I run the above, I get Element-type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

So it seems I am stuck and now I cannot check the issue itself.

dede

[jcgertig]

Should be fixed now