Как убрать глобальный хедер на некоторых страницах react?

Question

[Scryppi]

Есть структура:

render(
  (
      <ReduxProvider store={store}>
          <LangProvider>
              <ThemeProvider theme={theme}>
                  <ReactRouter>
                      <div>
                          <Switch>
                              <Route path="/sign-in" component={SignInPage}/>
                              <Route path="/sign-up" component={SignUpPage}/>
                              <Route path="/sign-forgot" component={SignForgotPage}/>
                          </Switch>

                          <Header />
                          <Route exact path="/" component={HomePage}/>
                          <Route path="/product/:id" component={ProductPage}/>
                          <Route path="/setting" component={SettingPage} />
                          <Route path="/orders" component={OrdersPage} />
                          <Route path="/reviews" component={ReviewsPage} />
                          <Route path="/shop/:id" component={ShopPage} />
                          <Route path="/category/:id" component={CategoryPage} />
                          <Route path="/cart" component={CartPage} />
                          <Route path="/favorites" component={FavoritesPage} />
                          <Route path="/categories/:id" component={CategoriesPage} />
                          <Route path="/article/:id" component={ArticlePage} />
                          <Footer />
                      </div>
                  </ReactRouter>
              </ThemeProvider>
          </LangProvider>
      </ReduxProvider>
  ),
  document.getElementById('root')
);

У меня на всех страницах хедер и футер отрендеренный при первой загрузке. Но есть страницы sign-in, sign-up и sign-forgot. Там нужно скрывать хедер и футер. Прошу помощи. Видел, что можно делать layout'ы, но в 4 версии вроде запретили помещать дочерние элементы в Route.

Думал делать проверки на puth в url, есть ли там sign. Но подумал, вдруг есть встроенные инструменты для этого в react-router

Answer 1

[Антон Спирин]

Там нужно скрывать хедер и футер.

Правильней будет там его вообще не рендерить.

Один из многочисленных вариантов решения:

<Switch>
  <Route path="/(sign-in|sign-up|sign-forgot)" component={AuthRoutes} />
  <Route component={MainRoutes} />
</Switch>

Думал делать проверки на puth в url, есть ли там sign.

Костыли.

Видел, что можно делать layout'ы, но в 4 версии вроде запретили помещать дочерние элементы в Route.

Но подумал, вдруг есть встроенные инструменты для этого в react-router

А почему бы, вместо того чтобы терзать себя догадками, не сесть и изучить документацию инструмента, который используешь в работе?

Comments

[Scryppi]

а можете подсказать, где именно в документации есть фича не рендерить компоненты? Я только нашел https://reacttraining.com/react-router/web/example... где показывают, что определенный компонент будет рендериться везде, без возможности поставить условие, чтобы не отображался в других страницах.

<Switch>
  <Route path="/(sign-in|sign-up|sign-forgot)" component={AuthRoutes} />
  <Route component={MainRoutes} />
</Switch>

В этом примере, только два роута, в первом компоненте AuthRoutes, будут вложенные роуты от sign-in, sign-up? А во втором MainRouter, другие? Я пробывал внутрь компонента добавлять роуты, мне приходила ошибка, что компонент не может содержать в себе роуты. Может, это из-за того что я использую функциональные компоненты с хуками?

[Антон Спирин]

Scryppi,

а можете подсказать, где именно в документации есть фича не рендерить компоненты?

Нет такой фичи.

Вы неправильно к решению задачи подходите. Вам надо добавлять Header и Footer в код только там, где вы собираетесь их отображать.

Я пробывал внутрь компонента добавлять роуты, мне приходила ошибка, что компонент не может содержать в себе роуты

Route можно использовать в любом компоненте-потомке Router. Читайте документации инструментов которые используете.

[Scryppi]

Я хотел рендерить футер и хедер только один раз, из-за этого его вывел из компонентов, если пихать его, где он нужен(почти везде), он будет повторно рендериться каждый раз и постоянно делать запрос к апи, потому что в хедере рендерятся категории. Не надо много раз советовать бесполезные советы-"читайте документацию", если я пишу это здесь, значит все прочитано и не найдено. Было бы на много быстрее и легче найти решение в документации, а не просить помощи у высокомерных "крутых" разработчиков. Можете оставить свое-"да ты просто тупой, не умеешь доки читать" при себе

[Антон Спирин]

Scryppi, вам и предоставили, пожалуй, одно из лучших решений, при котором ваши Header и Footer будут перенесены в компонент MainRoutes и пока не будет осуществлен переход на роуты авторизации они не будут размонтированы.

Не надо много раз советовать бесполезные советы-"читайте документацию", если я пишу это здесь, значит все прочитано и не найдено

Судя по вашим вопросам, все ваши проблемы именно от того, что вы их невнимательно читаете.

Можете оставить свое-"да ты просто тупой, не умеешь доки читать" при себе

Вам никто ничего подобного не писал.

Я хотел рендерить футер и хедер только один раз

И в вашем, и в моем примерах Header и Footer будут перерисовываться каждую смену роута. Надо либо оборачивать в connect, либо реализовывать shouldComponentUpdate. Размонтироваться они при этом не будут(в моем примере только при переходе на sing роуты).

если пихать его, где он нужен(почти везде)

Вам достаточно разместить их в одном единственном месте, в компоненте MainRoutes.

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

Я надеюсь вы понимаете, что монтирование и render это разные вещи.

[Scryppi]

Антон Спирин, Спасибо, помогло. Сделал

<ReactRouter>
                        <Switch>
                            <Route path="/sign-in" component={SignInPage}/>
                            <Route path="/sign-up" component={SignUpPage}/>
                            <Route path="/sign-forgot" component={SignForgotPage}/>
                            <Route component={MainLayout}/>
                        </Switch>
                    </ReactRouter>

Вместо вывода в MainLayout через children, заимпортил и поместил прямо в MainLayout роуты.