Как вы рендерите компоненты в зависимости от роута?

Question

[Anton Filippov]

Задавал похожий вопрос на StackOverflow, получил несколько интересных ответов. Но интересует практический опыт разработчиков.

Вкратце - периодически возникает задача, рендерить какой-то компонент(хэдер, футер, сайдбар, что угодно) только на некоторых роутах. Допустим в приложении 100 роутов, 50 из них должны иметь хэдер, 50 нет.

Как предложения получил варинаты:

1) Использовать HOC
2) Вот такую конструкцию:

...
<Switch>
  <Route path="/noheader1" ... />
  <Route path="/noheader2" ... />
  <Route path="/noheader3" ... />
  <Route component={HeaderRoutes} />
</Switch>
...

HeaderRoutes = props => (
  <React.Fragment>
    <Header/>
    <Switch>
      <Route path="/withheader1" ... />
      <Route path="/withheader2" ... />
      <Route path="/withheader3" ... />
    </Switch>
  </React.Fragment>
)

В принципе обе подходят, но у каждой есть свои нюансы. А если добавлять учитывание не только хэдера, а ещё и футера, и вдруг их общие роуты не пересекаются?

Интересует скорее практический опыт, возникают ли у вас такие ситуации и как вы их разрешаете? Или просто не паритесь о DRY и пихаете хэдер в каждый компонент где он нужен?

Answer 1

[Robur]

<Route path="/iwantrenderonthis" component={MyComponent} />

Если path не устраивает чем-то можно усложнить матчинг вплоть до своего кастомного но суть та же. HOC довольно удобен.
и это можно положить в любое место в приложении, если роут совпадает - MyComponent рендерится, если нет то нет.
ReactRouter v4, может в прошлых было сложнее, уже не помню.
Возможно хуки дадут сделать это красивее, не пробовал.

Comments

[Anton Filippov]

Вы вопрос то читали?

Answer 2

[Сергей Сунцев]

В плане практической реализпции я бы немного перегрузил роуты, (по факту их итак приходится перегружать для области видимости)

Далее можно обернуть его в Redux контейнер и по какому то (только вам известному) условию отправлять в него параметр видимости в зависимости от которого можно рендерить или не рендерить какой то компонент

Comments

[Anton Filippov]

Что значит перегрузил роуты?

Если оборачивать в редакс контейнер, то как это решит проблему DRY? В нём придется также чекать пути и по условию рендерить компонент