Я не понимаю, с какой целью следует использовать IndexRoute и IndexLink. Кажется, что в любом случае приведенный ниже код должен был выбрать компонент 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>
Какое преимущество/цель здесь в первом случае?
В верхнем примере, перейдя в /, будет отображаться App с Home, переданным как дочерний. В нижнем примере, перейдя в /, будет отображаться App без отображения Home и About, поскольку ни один из их путей не соответствует.
Для более старых версий React Router более подробную информацию можно найти в соответствующей версии Страница "Маршруты указателей и ссылки индекса" . Начиная с версии 4.0, React Router больше не использует абстракцию IndexRoute для достижения той же цели.
Когда пользователь посещает, отображается компонент приложения, но ни один из них не указан, поэтому this.props.children внутри приложения будет undefined. Чтобы отобразить некоторый пользовательский интерфейс по умолчанию, вы можете легко выполнить {this.props.children || <Home/>}.
Но теперь Home не может участвовать в маршрутизации, например, на крюках onEnter и т.д. Вы выполняете в том же положении, что и Учетные записи и выписки, поэтому маршрутизатор позволяет вам быть основным компонентом маршрута класса IndexRoute.
<Router>
<Route path="/" component={App}>
<IndexRoute component={Home}/>
<Route path="accounts" component={Accounts}/>
<Route path="statements" component={Statements}/>
</Route>
</Router>
Теперь приложение может отображать {this.props.children}, и у нас есть первоклассный маршрут для дома, который может участвовать в маршрутизации.