Nesting routes with react-router and IndexRoute (react router layouts)

Question

I'm trying to get a layout system with react-router. If I understand the docs correctly using IndexRoute is equal to nesting the routes under each other.

But In the following code when I use IndexRoute the child routes aren't being nested. but if

When I nest them with the right tags <Route><sub-route/></Route> it works as expected:

//THIS WORKS
export default function(history) {
  return (
    <Router history={history}>
        <Route component={App}>
          <Route path="/" component={Home}>
            <IndexRedirect to="slides"/>
            <Route path="slides" component={SlideShow}/>        
            <Route path="posts" component={Posts}/>
            <Route path="questions" component={Questions} />
            <Route path="questions/:id" component={Question} />
          </Route>
      </Route>       
    </Router>
  )
}

//DOSEN'T GET NESTED
export default function(history) {
  return (
    <Router history={history}>
      <Route path="/" component={App}>
        <IndexRoute component={Home}/>
          <Route path="slides" component={SlideShow}/>
          <Route path="posts" component={Posts} />
          <Route path="questions" component={Questions} />
          <Route path="questions/:id" component={Question} />
        </Route>       
    </Router>
  )
}

To illustrate this, if I use IndexRoute and take out this.props.children from the home component the children will still get rendered. Here is the home component:

class Home extends Component{
    render(){
        //const {SlideShow, Posts} = this.props
        return(
            <div>
                <h1>HOME PAGE!</h1>
                <span><Link to="/slides">to slides</Link></span>
                <span><Link to="/posts">to posts</Link></span>
                <span><Link to="/questions">to question</Link></span>
                <div>{this.props.children}</div>
            </div>
            )}
}

My second question is regarding the IndexRedirect. As you can see I'm using it to essentially redirect the user to the /slides route. But I would rather like not to use redirect and instead use slides under home without a path. Something like this:

<Router history={history}>
        <Route component={App}>
          <Route path="/" component={Home}>
            <Route component={SlideShow}/>        
            <Route path="posts" component={Posts}/>
            <Route path="questions" component={Questions} />
            <Route path="questions/:id" component={Question} />
          </Route>
      </Route>       
    </Router>

Is that possible?

I'm baiscally trying to achieve something like the following: Using React-Router with a layout page or multiple components per page

Only I don't quite understand the example given there as it doesn't use IndexRoute and seem to follow a different pattern.

IndexRoute for component by default in App's this.props.children, when you open '/' — Kokovin Vladislav, Jul 10 '16 at 18:02
i.e. home component will be in App's this.props.children, when you open '/' — Kokovin Vladislav, Jul 10 '16 at 18:04
I don't understand are you saying that's the default? So how do I use IndexRoute then? — S. Schenk, Jul 10 '16 at 18:08
You're being very cryptic, mind given an answer with example? — S. Schenk, Jul 10 '16 at 18:10
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/116935/discussion-between-utro-and-s-schenk). — Kokovin Vladislav, Jul 10 '16 at 18:12

score 0 · Answer 1 · answered Oct 12 '16 at 16:05

I'm not sure I understand your first question, but here's the answer to your second, and maybe it will answer both. You need to use IndexRoute to set a "home" page without redirecting. Use configuration like this:

<Router history={history}>  
  <Route path="/" component={App}>
    <IndexRoute component={SlideShow} />
    <Route path="posts" component={Posts}/>
    <Route path="questions" component={Questions}/>
    <Route path="questions/:id" component={Question}/>
  </Route>
</Router>

Now when someone accesses your root site, they will see the slides content (but it won't append /slides to the url).

In this example, I don't have the "Home" component anywhere, but since you said you want Home to be Slides, let me know if this doesn't suit your needs.

Nesting routes with react-router and IndexRoute (react router layouts)

1 Answers1