CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4
James
James

Reputation: 3815

React-Router: Always display a header but not in landing page

My current router tree looks like this:

  <Route exact path="/" component={Landing} />
  <Route component={Header} />§
  <Route path="/component1" component={Component1} />
  <Route path="/component2" component={Component2} />
  ...

I want to have the <Header /> display always when rendering components <Component1 /> and <Component2 /> but not when a user is in the Landing page (<Landing />).

However, with the above react router tree, the <Header /> is always displaying.

Upvotes: 3

Views: 1733

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282030

You can make use of Switch from react-router-dom and configure your Routes like

<Switch>
    <Route exact path="/" component={Landing} />
    <Route component={Header} />
</Switch>
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />

In the above case if Landing route matched, the Header is not rendered, else the Header is rendered

Upvotes: 7

Related Questions