How can I make conditional Header with React

Question

I want to making conditional Header page by page, which means that I don't want to show Header at Home page and I want to show Header at the other pages like posts page, projects page, etc..

I've tried to think how can I solved this problem, but there was no special way to working with react-router-dom. Of course, it may be only hard for me.

Whatever, I can't solve above problem is same.

So, this is current code:

<div className="ui container">
  <BrowserRouter>
    <Header />
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>
</div>

and I want fix it like this:

<div className="ui container">
  <BrowserRouter>
    {() => { 
      if(path !=="/") 
        return <Header />;
      } else {
        return ;
    }}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>
</div>

Felipe Domingues · Accepted Answer · 2019-11-12 15:47:17Z

4

without Switch , you can do this :

 <BrowserRouter>
    {window.location.pathname !== "/" ? <Header /> : null}
    <Route exact path="/">
    <Route exact path="/posts">
    <Route exact path="/project">
    <Route exact path="/profile">
  </BrowserRouter>

answered Nov 12, 2019 at 15:47

Felipe Domingues

3763 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user10204688 Over a year ago

This is It! thanks! for answer. It worked with your code!

user10204688 Over a year ago

humm.... I think this code makes another problem. Header doesn't render although link was changed. It shows Header within "/(something)", if I access with "/' then it doesn't render header. here is deme link acd2ef3d.ngrok.io

Fromwood · Accepted Answer · 2019-11-12 14:26:34Z

1

try with a Switch:

import { Route, Switch } from 'react-router-dom';

...

<Switch>
      <Route exact path="/" component={null} />
      <Route component={Header} />
<Switch>

...

doc: https://reacttraining.com/react-router/web/api/Switch

answered Nov 12, 2019 at 14:26

Fromwood

5163 silver badges6 bronze badges

Comments

handsben · Accepted Answer · 2019-11-12 14:43:59Z

1

There are ways you can do it.

You can use withRouter(), an Higher Order Component to wrap your component. So, with that that component will have access to the BrowserRouter props.
You can use Redux, We the posts page/component is mounted you set a isheader state to false. then you can use this state to condition the Header component.

A reference link:- Hide header on some pages in react-router-dom

Another method is to wrap those route that will have the header with a parent component example:

const Layout = ({ children }) => (
            <div>
              <Header />
                {children}
            </div>
          )
        const App = ()=> (
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Layout>
                      <Route exact path="/posts" component={..}>
                      <Route exact path="/project" component={..}>
                      <Route exact path="/profile" component={..}>
                    </Layout>
                </Switch>
            </BrowserRouter>
    )

edited Nov 12, 2019 at 14:43

answered Nov 12, 2019 at 14:34

handsben

521 silver badge5 bronze badges

1 Comment

user10204688 Over a year ago

Thank for kind anwser!

Collectives™ on Stack Overflow

How can I make conditional Header with React

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related