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

我不明白使用IndexRoute和IndexLink的目的是什么。 在任何情况下，下面的代码似乎都会首先selectHome组件，除非Aboutpath被激活。

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

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

Answer 1

在顶部的例子，去/将呈现App与Home作为一个孩子通过。 在底部示例中，由于它们的path都不匹配，所以将会呈现/将不呈现App ， 也不呈现App 。

对于早期版本的React路由器，关联版本的Index Routes和Index Links页面提供了更多的信息。 从版本4.0开始，React Router不再使用IndexRoute抽象来实现相同的目标。

Answer 2

当用户访问时， 应用程序组件被渲染，但没有一个孩子，所以应用程序内的this.props.children将是未定义的。 为了渲染一些默认的UI，你可以很容易地{this.props.children || <Home/>} {this.props.children || <Home/>} 。

但是现在Home不能像路由器那样参与路由，比如onEnter挂钩等等。你在与Accounts和Statements相同的位置渲染，所以路由器允许你把Home作为IndexRoute的一stream路由组件。

 <Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route> </Router> 

现在App可以呈现{this.props.children} ，我们有一个可以参与路由的Home的一stream路线。