React-Router:IndexRoute的目的是什么?


102

我不明白使用IndexRouteIndexLink的目的是什么。似乎在任何情况下,除非激活了About路径,否则下面的代码都会首先选择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>

第一种情况的优点/目的是什么?


为什么Home在第一个示例中选择,除非路径是/home?退房说明在docs:github.com/rackt/react-router/blob/master/docs/guides/basics/...
米歇尔·蒂利

您可以想象main是一个导航栏,而Home和About是可以单击导航栏的主页。
尼克·皮内达

2
在最上面的示例中,to /将以Appwith Home作为子级进行渲染。在底部示例中,将要/会使App既不 HomeAbout正在呈现,因为无论它们的路径的匹配。
Michelle Tilley

2
哦!您能以这个为答案,以便我给您功劳吗?谢谢!
尼克·皮内达

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

Answers:


101

在最上面的示例中,to /将以Appwith Home作为子级进行渲染。在底部的例子,要/会使得App既不 Home也不About被渲染,因为无论他们的路径都不匹配。

对于旧版本的React Router,可在相关版本的“ 索引路由和索引链接”页面上获得更多信息。从4.0版本开始,React Router不再使用IndexRoute抽象来实现相同的目标。


3
那么在实践中我们可以使用什么功能呢?
seasonqwe

1
例如,我们可以创建一个父容器,多个子路由,并将这些子路由之一设置为默认(IndexRoute)。或者,如果我们不需要默认的子路由,并且需要提示用户他要选择某项(则不选择IndexRoute)
Olga Gnatenko

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

小时候过世到底意味着什么?在后台加载?能够访问道具?其他?
StLia
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.