Ad

IndexRoute Doesn't Seem To Work

- 1 answer

I am using react-router 1.0.3 and have the following route configuration:

ReactDOM.render(
<Router history={ History.createHistory() }>
  <Route path="/pages/home.aspx" component={ HomeView }>
    <IndexRoute component={ DefaultView } />
  </Route>
</Router>,
document.getElementById(appRoot.id));

When I browse to /pages/home.aspx the HomeView is rendered but without the DefaultView inside of it. I tried to debug it and noticed that the render() method of HomeView gets called, but the render() method of DefaultView is not called.

What am I missing?

Ad

Answer

edited answer:

You need to place {this.props.children} within the render function of 'HomeView', which is essential within every view that contains child views (as with this situation)

As you're unsure about if it can still participate in routing, it will, just give it a try:

ReactDOM.render(
<Router history={ History.createHistory() }>
  <Route path="/pages/home.aspx" component={ HomeView } onEnter={HomeView.onEnter}>
    <IndexRoute component={ DefaultView } onEnter={DefaultView.onEnter} />
  </Route>
</Router>,
document.getElementById(appRoot.id));

and define the static onEnter in your 'DefaultView'/'HomeView'

React.createClass({
    statics: {
      onEnter(next, transition) {
        console.log('Hi from HomeView/DefaultView')
      }
    },
    render() {
      ....
    }
  });
Ad
source: stackoverflow.com
Ad