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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/32706913/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 14:07:48  来源:igfitidea点击:

React-Router : What is the purpose of IndexRoute?

javascriptreactjsreact-routerurl-routing

提问by Nick Pineda

I don't understand what the purpose of using an IndexRouteand IndexLink. It seems that in any case the code below would of selected the Home component first unless the About path was activated.

我不明白使用IndexRouteIndexLink的目的是什么。似乎在任何情况下,下面的代码都会首先选择 Home 组件,除非 About 路径被激活。

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

vs

对比

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

What's the advantage/purpose here of the first case?

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

采纳答案by Michelle Tilley

In the top example, going to /would render Appwith Homepassed as a child. In the bottom example, going to /would render Appwith neitherHomenor Aboutbeing rendered, since neither of their paths match.

在上面例子中,将/会使AppHome作为一个孩子通过。在底部的例子,要/会使得App既不Home也不About被渲染,因为无论他们的路径都不匹配。

For older versions of React Router, more information is available on associated version's Index Routes and Index Links page. Starting in version 4.0, React Router no longer uses the IndexRouteabstraction to achieve the same goal.

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