Задавал похожий вопрос на 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 и пихаете хэдер в каждый компонент где он нужен?
Средний