React router: информация о навигации на основе маршрута

Question

У меня есть простая одностраничная настройка приложения React с навигацией, содержанием и нижним колонтитулом. Сам Navbar состоит из двух суб-навигаторов: один для каждой страницы, и тот, который должен динамически изменяться на основе маршрута (навигация по страницам).

Так в основном, у меня есть один компонент верхнего уровня Container:

<Navbar> 
    <Navbar.Main/> 
    <Navbar.Page/> 
</Navbar> 
{this.props.children} 
<Footer/> 

и маршруты, определенные в приложении:

<Router history={browserHistory}> 
    <Route component={Container}> 
    <IndexRoute component={Home} /> 
    <Route path="/" component={Home} /> 
    <Route path="/contact" component={Contact} /> 
    <Route path="/about" component={About} /> 
    <Route path="*" component={NotFound} /> 
    </Route> 
</Router> 

Хотя содержание страницы будет изменяться в пределах {this.props.children} части, я бы как изменить содержание <Navbar.Page/> навигационный компонент на основе маршрута (контактная страница должна иметь контактную навигационную панель и т. д.).

Я знаю, что я могу легко достичь этого, создавая страницу navbar на странице, но я бы хотел сохранить рендеринг в самой навигационной панели.

Answer 1

Один из способов, которым мы в настоящее время используем в нашем проекте, - передать компоненты сторонних компонентов и выполнить то, что вы хотите сделать.

<Router history={browserHistory}> 
    <Route component={Container}> 
    <IndexRoute component={Home} /> 
    <Route path="/" component={Home} 
     // here I added components, but the name can be anything actually 
     components={{ navBarPage : SomeComponent }} 
     navBarPages={{ component : SomeComponent }} 
    /> 
    <Route path="/contact" component={Contact} /> 
    <Route path="/about" component={About} /> 
    <Route path="*" component={NotFound} /> 
    </Route> 
</Router> 

Итак, мы знаем, что мы можем передавать реквизиты на маршруты, но еще одна вещь - как добраться до этих реквизитов от компонентов.

Как вы можете поместить отладчик и найти свои реквизиты в родительском компоненте Контейнера, вы можете увидеть, что для вашего компонента Контейнер есть свойство 'routes' (aka this.props.routes).

Но вот грязная вещь, вы должны знать, насколько глубока компонент относительно родительского маршрутизатора (он же компонент Container), чтобы вы могли его достичь.

Например отлаживать компонент контейнера, чтобы увидеть доступный реквизит:

Как я добавил компоненты, navBarPages, я могу добраться до этих объектов из контейнера, как:

this.props.routes[0] // this is what you passed to Container 

this.props.routes[1] // one level deeper is what I want 
this.props.routes[1]['navBarPage'] 
this.props.routes[1]['components'] 

Обратите внимание, что, естественно, как ваш маршрут измените ваш this.props.routes изменится.