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="/" ponent={App}>
    <IndexRoute ponent={Wele} />
    <Route path="map" ponent={Map}>
        {/* Detail is a child ponent of Map,
            it only adds detail panel markup to Map.  */}
        <Route path="detail/:id" ponent={Detail} /> 
    </Route>
    <Route path="about" ponent={About} />
</Route>

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

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

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

This is the best solution I have found:

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

But I don't like the empty ponent.

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

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="/" ponent={App}>
    <IndexRoute ponent={Wele} />
    <Route path="map" ponent={Map}>
        {/* Detail is a child ponent of Map,
            it only adds detail panel markup to Map.  */}
        <Route path="detail/:id" ponent={Detail} /> 
    </Route>
    <Route path="about" ponent={About} />
</Route>

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

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

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

This is the best solution I have found:

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

But I don't like the empty ponent.

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

• javascript
• react-router

3 Answers 3

Move the / path

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

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

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

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

<IndexRoute ponent={Map}>
   <Route path="detail/:id" ponent={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 ponent as IndexRoute you will have to change your HTML structure so that there is no Detail ponent inside of your map ponent because then you will have the same problem again that you got a <Route> inside your <IndexRoute>