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

Question

Я пытаюсь создать какое-то правило для моего приложения (React), не отображать верхний и нижний колонтитулы для моего входа и компонента signUp.

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

<Header/>
  <Router>
    <div>
      <Route exact path='/' component={HomePage} />
      <Route exact path='/signin' component={SignInPage} />
      <Route exact path='/signup' component={SignUpPage} />
    </div>
  </Router>
<Footer/>

Answer 1

Добавьте родительский Route, который отображает ваши Header, Footer и другие маршруты, а затем создает условие на основе pathname.

<Router>
    <Header />
      <Route
        render={props => (  
          <>
            {props.location.pathname !== '/signin' ? <Header /> : null}
            <Switch>
              <Route exact path="/" component={HomePage} />
              <Route exact path="/signin" component={SignInPage} />
              <Route exact path="/signup" component={SignUpPage} />
            </Switch>
            <Footer />
          </>
        )}
      />
    <Footer />
  </Router>