Different Navbar for a component in react router

Question

m trying to build a separate navigation bar to one of the components. I tried to move it outside the Switch element but it didn't work out well. Any suggestions?

Here is the code:

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

const App = () => {
return (
    <Provider store={store}>
      <NavBar />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/landingPageExample' component={LandingExample} />

        <Route exact path='/landingPage/:username' component={Landing}/> // That the component I'm
        trying to have for a different Navbar

        <AuthRoute exact path='/login' component={Login} />
        <AuthRoute exact path='/signup' component={Signup} />
        <ProtectedRoute exact path='/editLandingPage' component={EditLandingPage} />
        <ProtectedRoute exact path='/editUser' component={EditUser} />
        <ProtectedRoute exact path='/editPost' component={EditPost} />
        <ProtectedRoute exact path='/collectedEmails' component={Sheets} />
        <Route component={NotFound} />
      </Switch>
    </Provider>
  )
}

Answer 1

You can write a simple wrapper around Route that need to render Navbar and use the normal Route for a component that doesn't need the generic Navbar

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


const RouteWithNavbar = ({exact, path, component:Component, ...rest}) => {
   return <Route exact={exact} path={path} {...rest} render={(routeProps) => {
      return <><Navbar {...routeProps}/><Component {...routeProps}/>
   }}
   />
}
const App = () => {
return (
    <Provider store={store}>
      <Switch>
        <RouteWithNavbar exact path='/' component={Home} />
        <RouteWithNavbar exact path='/about' component={About} />
        <RouteWithNavbar exact path='/landingPageExample' component={LandingExample} />

        <Route exact path='/landingPage/:username' component={Landing}/> 

        <AuthRoute exact path='/login' component={Login} />
        <AuthRoute exact path='/signup' component={Signup} />
        <ProtectedRoute exact path='/editLandingPage' component={EditLandingPage} />
        <ProtectedRoute exact path='/editUser' component={EditUser} />
        <ProtectedRoute exact path='/editPost' component={EditPost} />
        <ProtectedRoute exact path='/collectedEmails' component={Sheets} />
        <RouteWithNavbar component={NotFound} />
      </Switch>
    </Provider>
  )
}

Also note that AuthRoute and ProtectedRoute will also internally use RouteWithNavbar if they also need to share the Navbar