Как в react-router сделать сайдбар опциональным?

Question

[Владимир Т.]

Смотрю в доку как сделать сайдбар https://reacttraining.com/react-router/web/example...
Если всё верно понял, то такой сайдбар будет на каждой странице. Мне нужно, чтобы на некоторых страницах сайдбара не было. Как это можно делать?

Comments

[Владимир Т.]

Пока решил проблему вынеся сайдбар в отдельный компонент и подключая его в компонентах-страницах. Теперь интересно — насколько это "православное" решение?

[Aves]

Владимир Т.: там же в примере по идее можно просто отфильтровать роуты, в которых не нужно показывать сайдбар, типа

{routes.map((route, index) => (
          route.path == '/' ? null : <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.sidebar}
          />
        ))}
      </div>

[Владимир Т.]

Aves: не, этот цикл это кусочек внутри сайдбара:

[Aves]

Владимир Т.: этот кусочек в данном примере и есть сайдбар, ссылки это навигация
jsbin.com/jupazo/embed?css,js,output

Answer 1

[Максим]

Можно сделать 2 разных "разметки", так сказать. В одной у вас есть сайдбар, в другой нет.
2 разные разметки = 2 разных компонента (роут-с-сайдбаром, роут-без-сайдбара).
Оборачиваете дочерние роуты в роут-с-сайдбаром, или в роут-без-сайдбара и там рисуете нужный шаблон + this.props.children. Вложенность роутов друг в друга - любая, можно таким образом еще усложнить логику отрисовки шаблона.

p.s. 4ю версию роута еще не смотрел. Но таким решением пользуюсь с 3й версией, думаю в 4м так же, либо еще удобнее придумали.

p.p.s. тема с фильтрацией, которую посоветовал Aves тоже подходит.

(пример, используется getComponent - это для динамической подгрузки)

<Route path='/reports' component={AuthenticatedContainer} onEnter={_ensureAuthenticated}>
  <Route getComponent={() => def(import('../containers/WiwthSidebar'))}>
    <Route path='/reports/a' getComponent={() => def(import('../containers/A'))} />
    <Route path='/reports/b' getComponent={() => def(import('../containers/B'))} />
  </Route>
  <Route getComponent={() => def(import('../containers/WithoutSideber'))}>
    <Route path='/reports/c' getComponent={() => def(import('../containers/C'))} />
  </Route>
</Route>