React-Router: Какова цель IndexRoute?
Я не понимаю, с какой целью следует использовать 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>
Какое преимущество/цель здесь в первом случае?
Ответы
Ответ 1
В верхнем примере, перейдя в /, будет отображаться App с Home, переданным как дочерний. В нижнем примере, перейдя в /, будет отображаться App без отображения Home и About, поскольку ни один из их путей не соответствует.
Для более старых версий React Router более подробную информацию можно найти в соответствующей версии Страница "Маршруты указателей и ссылки индекса" . Начиная с версии 4.0, React Router больше не использует абстракцию IndexRoute для достижения той же цели.
Ответ 2
Когда пользователь посещает, отображается компонент приложения, но ни один из них не указан, поэтому 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}, и у нас есть первоклассный маршрут для дома, который может участвовать в маршрутизации.
