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