IndexRoute sub-routes

Question

I have a web site with few ordinary pages and a page with Google Map. When map marker is clicked a panel with marker details is displayed next to the map. This detail has own URL so that users can link to it:

<Route path="/" component={App}>
    <IndexRoute component={Welcome} />
    <Route path="map" component={Map}>
        {/* Detail is a child component of Map,
            it only adds detail panel markup to Map.  */}
        <Route path="detail/:id" component={Detail} /> 
    </Route>
    <Route path="about" component={About} />
</Route>

This works fine. But let's get rid of Welcome page and display Map right on the web root so that:
/ renders App > Map components
/detail/:id renders App > Map > Detail components
/about renders App > About components

<Route path="/" component={App}>
    {/* Map has to be IndexRoute so that it is displayed at root URL. */}
    <IndexRoute component={Map}>
        <Route path="detail/:id" component={Detail} /> 
    </IndexRoute>
    <Route path="about" component={About} />
</Route>

But this doesn't work because IndexRoute can't have subroutes .

This is the best solution I have found:

<Route path="/" component={App}>
    <Route component={Map}>
        <IndexRoute component={EmptyComponent} />
        <Route path="detail/:id" compoent={Detail} />
    </Route>
    <Route path="about" component={About} />
</Route>

But I don't like the empty component.

Am I missing something? Am I doing something unusual? Why it is not possible to do it the first more intuitive way?

Answer 1

Move the / path

<Route component={App}>
  <Route path="/" component={Map}>
    <Route path="detail/:id" component={Detail}/>
  </Route>
  <Route path="/about"/>
</Route>

Answer 2

Your solution looks largely fine to me – the only caveat is that you don't need to specify the component in that case; just do <IndexRoute /> .

By design, index routes terminate matching, but it's easy to insert trivial routes.

Answer 3

Maybe I am wrong but it seems as if your tried to set another route in:

<IndexRoute component={Map}>
   <Route path="detail/:id" component={Detail} /> 
</IndexRoute>

So your basic structure is something like:

<IndexRoute> <Route> </Route> </IndexRoute>

According to your error it is not allowed that there is a <Route> inside of your <IndexRoute> ... At the beginning you did not do that mistake because you closed the <IndexRoute> before you opened the next <Route> -Tag.

So if you want your code to work again you should not open another <Route> inside of your <IndexRoute> . You managed to fix this by adding an Dummy-IndexRoute. So if you want to set your Map component as IndexRoute you will have to change your HTML structure so that there is no Detail component inside of your map component because then you will have the same problem again that you got a <Route> inside your <IndexRoute>