CODEWITHSUNDEEP
reactjsreact-router
Vishal
Vishal

Reputation: 365

Show/Hide Navigation Component for certain routes in react

I have a main App level component like below

        <div className="app-container">
            <AppHeader />
            <div className="app-content">
                <Routes />
            </div>
            <Notification />
        </div>

I want the <AppHeader /> to appear (or be hidden) for certain routes. How can this be done in a clean way in React? I am using React Router

Upvotes: 0

Views: 426

Answers (1)

Tholle
Tholle

Reputation: 112777

One way of going about it is to create a new Switch and not render anything for those paths you don't want to show your header in, and render the header for every other path.

Example

<Switch>
  <Route path="/login" />
  <Route path="/about" />
  <Route path="/*" component={AppHeader} />
</Switch>

Upvotes: 1

Related Questions