Как реализовать layout/views на React?

Question

[Jedi]

Как бы вы реализовали работу с layout`ами?

Смотрите, это обычный AppComponent:

return (
    <div className="App">
      <header>
        <nav>
          <Link to="somewhere">Главная</Link>
        </nav>
      </header>
      <main>
        <Switch>
          <Route exact path="/" component={}/>
          <Route path="/somewhere" component={} />
        </Switch>
      </main>
    </div>
  );

Я хочу реализовать разные View. Например, в notFound странице не должно отображаться NavigationBar(Меню) и footer.

Как это грамотно реализовать?

Answer 1

[Magrian]

еще один Switch с notFound в корне

Comments

[Jedi]

Нет, вы не поняли. Это моя вина. Вопрос не в том, как реализовать это для NotFound, а в том, как реализовать layout`ы.

[Игорь Васильев]

Jedi, попробуйте использовать "чилдрены"
https://reactrouter.com/
тут есть разные примеры реализации.
То есть роуты должны получать чилдрены а не компоненты
Либо делайте компонент обёртку и вешаете на все страницы где нужен именно этот дизайн.
Если вас не принуждают писать на чистом React JS тогда пробуйте делать сайты на next.js или на getsby
В вашем случае помогут только чилдрены.

[Jedi]

Игорь Васильев, Спасибо! Попробую!