title: Nested react routes with different page layouts
body: <p>I'm having two issues with my code: </p>
  
  <p>Number One:
  My whole application seems to work fine, I can access all my routes when I first load my web app. My app consists of a Landing Page with its navbar that has a login button that takes me straight to my application's home page (haven't added authentication yet). This home page has a navbar that is different from the one on the landing page. The navbar items are (home, about and LandingPage). My App.js has routes to the landing page component, the home page which is the Gitapp component, and a PageNotFound component. The Gitapp component contains routes to the about page and other components. If i happen to reload the page while i'm on one of the routes on App.js (first-level routes) it reloads fine. However, if I'm on the routes (second-level routes) that exist on my Gitapp component, like the route for the about page and i reload the page, I get the PageNotFound Component.</p>
  
  <p>Number Two:
  My second Navbar has a logout button that should take me back to the landing page. For some Reason I can't get it to work because If I add the route to the landing page in my Gitapp component, React will try to display the landing page underneath the Home page.</p>
  
  <p>This is App.js:</p>
  
  <pre><code>const App = () =&gt; {
    return (
      &lt;Fragment&gt;
        &lt;Router&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/' component={LandingPage} /&gt;
            &lt;Route exact path='/gitapp' component={GitApp} /&gt;
            &lt;Route component={PageNotFound} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  
  <p>This is LandingPage.js:</p>
  
  <pre><code>const LandingPage = () =&gt; {
    return (
      &lt;div&gt;
        &lt;NavbarLanding /&gt;
        &lt;SideNavBar /&gt;
        &lt;LandingSection1 /&gt;
        &lt;LandingSection2 /&gt;
        &lt;LandingSection3 /&gt;
  
        &lt;Route exact path='/gitapp' component={GitApp} /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>This is Gitapp.js:</p>
  
  <pre><code>const GitApp = ({ match }) =&gt; {
    return (
      &lt;GithubState&gt;
        &lt;Router&gt;
          &lt;div style={containerStyling}&gt;
            &lt;Navbar /&gt;
            &lt;Switch&gt;
              &lt;Route exact path={match.url} component={Home} /&gt;
              &lt;Route
                exact
                path={`${match.url}/user/:login`}
                component={UserProfile}
              /&gt;
              &lt;Route exact path={`${match.url}/about`} component={About} /&gt;
            &lt;/Switch&gt;
            &lt;Footer /&gt;
          &lt;/div&gt;
        &lt;/Router&gt;
      &lt;/GithubState&gt;
    );
  };
  
  const containerStyling = {
    minHeight: '100vh',
    overflow: 'hidden',
    display: 'block',
    position: 'relative',
    paddingBottom: '70px'
  };
  
  </code></pre>