React-Router：IndexRoute 的用途是什么？

Question

我不明白使用IndexRoute和IndexLink的目的是什么。看来在任何情况下，除非激活“关于”路径，否则下面的代码都会首先选择“主页”组件。

<Route path="/" component={App}>
  <IndexRoute component={Home}/>
  <Route path="about" component={About}/>
</Route>

对

<Route path="/" component={App}>
  <Route path="home" component={Home}/>
  <Route path="about" component={About}/>
</Route>

第一个案例的优点/目的是什么？

Answer 1

在上面的示例中，转到

/

将渲染

App

，并将

Home

作为子项传递。在下面的示例中，转到

/

将渲染

App

，同时

Home

和

About

都不会被渲染，因为它们的路径都不匹配。

对于旧版本的 React Router，可以在相关版本的索引路由和索引链接页面上获取更多信息。从 4.0 版本开始，React Router 不再使用

IndexRoute

抽象来实现相同的目标。

Answer 2

在React Router v6中，索引路由是没有路径的子路由。直接访问父路由时默认显示内容

例如： 代码中：

<Route path="app" element={<AppLayout />}>
  <Route index element={<p>List</p>} />
  <Route path="cities" element={<p>List of cities</p>} />
  <Route path="countries" element={<p>Countries</p>} />
  <Route path="form" element={<p>Form</p>} />
</Route>

Visiting /app will render the index route: <p>List</p>.
Visiting /app/cities will render <p>List of cities</p>.

索引路线非常适合：

未定义或匹配特定子路由时显示默认页面。

索引路由充当默认子路由。当其他子路由都不匹配时，例如当用户访问父路由但在其路径后没有指定任何内容时，就会显示它。

例如，如果父路由是 /app 并且其后没有任何内容（如 /app/cities），则将显示索引路由。您可以使用它来显示默认视图，例如城市列表或任何其他内容。