IndexRoute子路由

Question

我有一个几乎没有普通网页的网站和一个包含Google Map的网页.单击地图标记时,地图旁会显示带有标记详细信息的面板.此详细信息具有自己的URL,以便用户可以链接到它:

<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>

这很好用.但是,让我们摆脱欢迎页面并在Web根目录上显示Map,以便:
/渲染  App > Map组件
/detail/:id呈现  App > Map > Detail组件
/about呈现  App > About组件

<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>

但这不起作用,因为IndexRoute 不能有子路由.

这是我找到的最佳解决方案:

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

但我不喜欢空组件.

我错过了什么吗？我做的事情不寻常吗？为什么不可能以第一个更直观的方式做到这一点？

Answer 1

移动/路径

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