javascript - IndexRoute 子路由

Question

我有一个只有几个普通页面和一个带有 Google map 的页面的网站。单击 map 标记时， 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>

这很好用。但是让我们去掉 Welcome 页面并在网络根目录上显示 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 can't have subroutes .

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

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