React-Router：IndexRoute 的目的是啥？

Posted 2023-02-21

【中文标题】React-Router：IndexRoute 的目的是啥？

【英文标题】：React-Router : What is the purpose of IndexRoute?React-Router：IndexRoute 的目的是什么？

【发布时间】：2015-12-18 20:14:24

【问题描述】：

我不明白使用 IndexRoute 和 IndexLink 的目的是什么。似乎无论如何下面的代码都会首先选择 Home 组件，除非激活了 About 路径。

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

第一种情况的优势/目的是什么？

【问题讨论】：

为什么在第一个示例中选择Home，除非路径是/home？查看文档中的解释：github.com/rackt/react-router/blob/master/docs/guides/basics/…

你可以想象 main 是一个导航栏，而 Home 和 About 是你可以在导航栏上点击进入的主页。

在上面的示例中，转到/ 将呈现App 和Home 作为孩子传递。在下面的示例中，转到 / 将渲染 App，而 既不 Home 或 About 被渲染，因为它们的路径都不匹配。

哦！！！你能把它作为一个答案，这样我就可以给你信用吗？谢谢！

在从 v0.13 到 v1.0 的更改中，他们将名称从 DefaultRoute 更改为 IndexRoute。我发现“默认”更好地描述了目的。 github.com/rackt/react-router/blob/master/…

【参考方案1】：

在上面的示例中，转到/ 将呈现App，Home 作为子级传递。在下面的示例中，转到/ 将呈现App，而既不 Home 也不呈现About，因为它们的路径都不匹配。

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

【讨论】：

那么我们可以在实践中使用这个功能做什么呢？

例如，我们可以创建一个父容器，多个子路由，并将其中一个子路由设置为默认路由（IndexRoute）。或者，如果我们不需要默认子路由，并且需要提示用户他要选择某些东西（那么没有 IndexRoute）

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

小时候传递的确切含义是什么？在后台加载？能够访问道具？其他的？