React-Router：IndexRoute的目的是什么？

Question

我不理解使用IndexRoute和IndexLink的目的。似乎在任何情况下，除非激活了关于路径，否则以下代码都会首先选择Home组件。

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

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

- Nick Pineda

---

除非路径为 /home，否则为什么在第一个示例中会选择 Home？请查看文档中的解释：https://github.com/rackt/react-router/blob/master/docs/guides/basics/IndexRoutes.md - Michelle Tilley

你可以想象main是一个导航栏，而Home和About则是你可以通过导航栏点击的主页面。 - Nick Pineda

在上面的例子中，访问 / 会呈现 App 并将 Home 作为子组件传递。在下面的例子中，访问 / 会呈现 App，但是 既不会 呈现 Home 也不会呈现 About，因为它们的路径都不匹配。 - Michelle Tilley

哦！！！你能把那个作为答案吗，这样我就可以给你积分了吗？谢谢！ - Nick Pineda

在从v0.13升级到v1.0时，他们将名称从“DefaultRoute”更改为“IndexRoute”。我认为“default”更能描述其目的。https://github.com/rackt/react-router/blob/master/UPGRADE_GUIDE.md#linking-to-defaultindex-routes - Clarkie

Answer 1

在顶部的示例中，访问 / 将渲染带有 Home 作为子项传递的 App。在底部示例中，访问 / 将渲染 App，但既不会渲染 Home，也不会渲染 About，因为它们的路径都不匹配。

对于旧版本的 React Router，请参考相关版本的 Index Routes and Index Links page 以获取更多信息。从 4.0 版本开始，React Router 不再使用 IndexRoute 抽象来实现相同的目标。

- Michelle Tilley

---

那么我们实际上可以如何使用这个功能呢？ - seasonqwe

例如，我们可以创建一个父容器，多个子路由，并将其中一个子路由设置为默认路由（IndexRoute）。或者，如果我们不需要默认的子路由，并且需要提示用户选择某些内容（没有IndexRoute），则可以这样做。 - Olga Gnatenko

@AlexHopeO'Connor 谢谢，我已经更新了答案的后半部分。 - Michelle Tilley

作为子组件传递的参数具体是什么意思？在后台加载？能够访问props属性？还是其他？ - StLia