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

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

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

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

источник

2015-09-22 Nick Pineda

Почему в первом примере выбрано 'Home', если только путь не был'/home'? Ознакомьтесь с пояснениями в документах: https://github.com/rackt/react-router/blob/master/docs/guides/basics/IndexRoutes.md –

Вы можете себе представить, что main является навигационной панелью, и что Home и About являются главной страницей, которую вы можете щелкнуть по панели навигации. –

В верхнем примере, если '/' будет отображать 'App' с' Home', переданным в качестве дочернего элемента. В нижнем примере, если '/' будет отображать 'App' с * ни *' Home', либо 'About' быть рендером, так как ни один из их путей не соответствует. –

В верхнем примере, перейдя на /, будет отображаться App с Home в качестве ребенка. В нижнем примере, начиная с /, будет отображаться App с ниHome, либо About не отображается, так как ни один из их путей не соответствует.

Для более старых версий React Router дополнительная информация доступна по Index Routes and Index Links page соответствующей версии. Начиная с версии 4.0, React Router больше не использует абстракцию IndexRoute для достижения той же цели.

источник

2015-09-22 01:30:18

Итак, что мы можем использовать на практике? – seasonqwe

Например, мы можем создать один родительский контейнер, несколько дочерних маршрутов и установить один из этих дочерних маршрутов по умолчанию (IndexRoute). Или, если нам не нужен дочерний маршрут по умолчанию, и нам нужно намекнуть пользователю, что он должен что-то выбрать (тогда нет IndexRoute) –

@ AlexHopeO'Connor Спасибо, я обновил вторую половину ответа –

Когда пользователь посещает, отображается компонент App, но ни один из них не указан, поэтому this.props.children внутри приложения будет неопределенным. Чтобы отобразить некоторый пользовательский интерфейс по умолчанию, вы можете легко сделать {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} и у нас есть первый класс маршрут для дома, которые могут участвовать в маршрутизации.

источник

2017-08-16 11:55:30 Bipon

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

ответ

Смежные вопросы