Different Nav based on route react router

Question

Hello all I did use search but I couldnt find anything that solved this problem. I need two navbars one for most pages and one for a specific set of routes

code

  <BrowserRouter>
        <Header />
        <Switch>
          <Route exact path="/" component={() => <div>home</div>} />
          <Route exact path="/services" component={() => <div>services</div>} />
        </Switch>
  </BrowserRouter>

I need something that would say render all routes except /services/* because /services/* has different

I thought about changing things inside Header but there will be too many changes it would be easier to have different component.

You could create a higher-order component, something like `WithHeader`, that renders a component with the `Header` component. See [this related question](https://stackoverflow.com/questions/64306222/is-there-a-function-in-react-to-hide-a-component-based-on-the-website-path) that is about rendering a footer at some paths. — Yousaf, Dec 06 '20 at 06:33
https://stackoverflow.com/questions/57789388/how-to-display-different-navbar-component-for-different-reactjs-pages this will solve your problem. — Abu Sufian, Dec 06 '20 at 06:40

score 0 · Answer 1 · answered Dec 06 '20 at 06:44

0

You could set up a condition inside your path. I haven't tested this, but something in that nature could help you combine and separate certain routes.

<BrowserRouter>
        <Header />
        <Switch>
          <Route exact path={"/allComponents" || "/"} component={() => <div>home</div>} />
          <Route exact path="/services" component={() => <div>services</div>} />
        </Switch>
  </BrowserRouter>

answered Dec 06 '20 at 06:44

Noah Kanyo

500
1
3
8

do you think it would work if i simply placed the services nav above the home one since it does a partial match? – thebronxsystem Dec 07 '20 at 09:30
It will show in order if you are showing all routes or some routes. You can always try and let me know. – Noah Kanyo Dec 07 '20 at 13:34
It decided to go with a HOC that Yousaf posted it works very well and is declarative. thank you all for contributing. – thebronxsystem Dec 08 '20 at 06:15

Different Nav based on route react router

1 Answers1