CODEWITHSUNDEEP
reactjsreact-router
Paulo Reigadas
Paulo Reigadas

Reputation: 1

How to create a condition to not render my Header component in one of my Route

I am trying to create some rule for my App (React) do not render Header and Footer for my signIn and signUp component.

I am trying to get some variable (like path) and check, but is not working. I do not want to use the components (Header and Footer) inside others components.

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

Upvotes: 0

Views: 261

Answers (1)

Kamran Nazir
Kamran Nazir

Reputation: 692

Add a parent Route that renders your Header, Footer and other routes then make a condition based on 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>

Upvotes: 0

Related Questions