title: Different Navbar for a component in react router
body: <p>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?</p>
  
  <p>Here is the code: </p>
  
  <pre><code>import React, { useEffect } from 'react'
  import { Switch, Route } from 'react-router-dom'
  
  const App = () =&gt; {
  return (
      &lt;Provider store={store}&gt;
        &lt;NavBar /&gt;
        &lt;Switch&gt;
          &lt;Route exact path='/' component={Home} /&gt;
          &lt;Route exact path='/about' component={About} /&gt;
          &lt;Route exact path='/landingPageExample' component={LandingExample} /&gt;
  
          &lt;Route exact path='/landingPage/:username' component={Landing}/&gt; // That the component I'm
          trying to have for a different Navbar
  
          &lt;AuthRoute exact path='/login' component={Login} /&gt;
          &lt;AuthRoute exact path='/signup' component={Signup} /&gt;
          &lt;ProtectedRoute exact path='/editLandingPage' component={EditLandingPage} /&gt;
          &lt;ProtectedRoute exact path='/editUser' component={EditUser} /&gt;
          &lt;ProtectedRoute exact path='/editPost' component={EditPost} /&gt;
          &lt;ProtectedRoute exact path='/collectedEmails' component={Sheets} /&gt;
          &lt;Route component={NotFound} /&gt;
        &lt;/Switch&gt;
      &lt;/Provider&gt;
    )
  }
  </code></pre>