title: React Router v5.0 Nested Routes
body: <p>I'm building a react app and I can't make the routing work.</p>
  
  <ol>
  <li><p>I need one common layout (header, footer) for a few Auth routes (<code>/login</code>, <code>sign-up</code>, <code>forgot-password</code>, etc...)</p></li>
  <li><p>And I need need another common layout for the rest of the protected parts of the app (<code>Home</code>, <code>Dashboard</code>, etc...)</p></li>
  <li><p>I need another 404 page without any layout.</p></li>
  </ol>
  
  <p>I've tried several techniques from those links:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/43333920/multiple-layouts-with-react-router-v4/44666358#44666358">Multiple Layouts with React Router v4</a></li>
  <li><a href="https://simonsmith.io/reusing-layouts-in-react-router-4" rel="noreferrer">https://simonsmith.io/reusing-layouts-in-react-router-4</a></li>
  <li><a href="https://stackoverflow.com/questions/41474134/nested-routes-with-react-router-v4-v5">Nested routes with react router v4 / v5</a></li>
  <li><a href="https://reacttraining.com/react-router/web/example/route-config" rel="noreferrer">https://reacttraining.com/react-router/web/example/route-config</a></li>
  </ul>
  
  <p>But could reach working version.</p>
  
  <p>This is what I'm currently have:</p>
  
  <p>(Note: for now I'm ignoring the need to block non logged-in users into the private routes of AppLayout, I'll handle that right after)</p>
  
  <pre><code>const App: React.FC = () =&gt; {
      const history = createBrowserHistory();
  
      return (
          &lt;div className="App"&gt;
              &lt;Router history={history}&gt;
                  &lt;Switch&gt;
                      &lt;AppLayout&gt;
                          &lt;Route path="/home" component={HomePage}/&gt;
                          &lt;Route path="/dashboard" component={DashboardPage}/&gt;
                          ...
                      &lt;/AppLayout&gt;
                      &lt;AuthLayout&gt;
                          &lt;Route path="/login" component={LoginPage}/&gt;
                          &lt;Route path="/sign-up" component={SignUpPage}/&gt;
                          ...
                      &lt;/AuthLayout&gt;
                      &lt;Route path="*" component={NotFoundPage} /&gt;
                  &lt;/Switch&gt;
              &lt;/Router&gt;
          &lt;/div&gt;
      );
  };
  
  export default App;
  </code></pre>
  
  <p>Both <code>AuthLayout</code> and <code>AppLayout</code> are simple and similar to that (just with different header/footer for each):</p>
  
  <pre><code>class AppLayout extends Component {
      render() {
          return (
              &lt;div className="AppLayout"&gt;
                  &lt;header&gt;...&lt;/header&gt;
                  {this.props.children}
                  &lt;footer&gt;...&lt;/footer&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default AppLayout;
  </code></pre>
  
  <p>The problem is that only routes from the AppLayout are rendered.
  Other routes just showing the AppLayout <code>header</code> and <code>footer</code> without any content.</p>
  
  <p>Those are the react versions I'm using:</p>
  
  <pre><code>    "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-router-dom": "^5.0.0",
  </code></pre>
  
  <p>Any help would be appreciated.</p>
  
  <p>Thanks in advance.</p>