IndexRoute 子路由

Question

我的网站只有几个普通页面和一个带有 Google 地图的页面。单击地图标记时，地图旁边会显示一个带有标记详细信息的面板。此详细信息有自己的 URL 以便用户可以 link 访问它：

<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

也许我错了，但您似乎试图在以下位置设置另一条路线：

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

所以你的基本结构是这样的：

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

根据你的错误，你的<IndexRoute>里面不允许有<Route>...一开始你没有犯那个错误，因为你关闭了<IndexRoute> 在你打开下一个 <Route>-标签之前。

因此，如果您希望您的代码再次运行，您不应该在 <IndexRoute> 中打开另一个 <Route>。您通过添加 Dummy-IndexRoute 设法解决了这个问题。因此，如果您想将 Map 组件设置为 IndexRoute，则必须更改 HTML 结构，以便在 map 组件内部没有 Detail 组件，因为那样您将再次遇到同样的问题，即您得到了 <Route> 在你的 <IndexRoute>

里面

Answer 2

你的解决方案在我看来基本没问题——唯一需要注意的是，在这种情况下你不需要指定组件；就做 <IndexRoute />.

根据设计，索引路由终止匹配，但很容易插入普通路由。

Answer 3

移动 / 路径

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

IndexRoute 子路由

IndexRoute sub-routes

javascript

react-router