Разный Layout для страниц?

Question

[alex4answ]

Добрый вечер, есть 3 разных Layout для разных страниц:

1. С шапкой и Сайдбаром (контентные страницы)
2. С шапкой, без сайдбара (главная страница)
3. Без шапки и сайдбара (страница регистрации/аутенфикации, 404)
+ В разных страницах разное содержание сайдбара (где-то фильтр, где-то разные виджеты и тп)

Стоит react-router, сейчас App компонент выглядит примерно так:

const App = () => (
 // ...
  <Switch>
    <Route exec path="/" component={HomePage} />
    <Route path="/about" component={AboutPage} />
    <Route path="/signin" component={AuthPage} />
  </Switch>
// ...
)

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

Подскажите, как обычно делаются такие вещи?

Answer 1

[Ice]

Выкинуть 3 вариант и нормально будет.
Это нормальная практика использования 1 тип для приветственной страницы ( регистрация / авторизация ) и рабочее пространство с каким-то выезжающим меню и другими наворотами.

Comments

[alex4answ]

Ice , но проблема все та же, где определять Layout, в каждом компонент-страница?

Или может быть сделать проверку в App на текущий url, и по нему формировать Layout (но это уже императивно получается, что в каком-то смысле противоречит философии React)

Answer 2

[Сергей delphinpro]

Nested routes я полагаю.

<Route component={App} path="/">
  <Route component={Layout1} path="/">
    <Route component={View1} path="/view1"></Route>
    <Route component={View2} path="/view2"></Route>
  </Route>
  <Route component={Layout2} path="/">
    <Route component={View3} path="/view3"></Route>
    <Route component={View4} path="/view4"></Route>
  </Route>
</Route>

Я правда не помню, как это пишется в реакте. Мы на Vue таким образом решаем проблему лейаутов.

Comments

[alex4answ]

Сергей delphinpro , мысль понял, но по сути это тоже самое что и определять Layout в Page компоненте, только на уровень выше и более понятно

Так вложенные компоненты не рендеряся, работает только так

<Route exact path="/">
  <Layout>
    <HomePage />
   </Layout>
</Route>
<Route path="/signin">
  <Layout2>
    <SignInPage />
  </Layout2>
</Route>

Но наверное по-другому и не решить, спасибо за ответ :)