React-Router: Какова цель IndexRoute?

Я не понимаю, с какой целью следует использовать IndexRoute и IndexLink. Кажется, что в любом случае приведенный ниже код должен был выбрать компонент Home сначала, если не был активирован путь About.

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

Какое преимущество/цель здесь в первом случае?

Ответ 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}, и у нас есть первоклассный маршрут для дома, который может участвовать в маршрутизации.