title: How to make multipages and layout (or) container with React Router?
body: <p>I'm making a dashboard, using React Router v4. I have pages such as Sign up, Sign in, Add and List products, Add and List customers.</p>
  
  <p>Authentication pages, Sign up and Sign in pages are with their own layouts, no, header or footer or nav manu. The rest share the same layout design, with header, nav menu and footer.</p>
  
  <p>I've tried this:</p>
  
  <pre><code>// App.tsx
  
  return (
    &lt;Router&gt;
      &lt;Route exact path="/" component={Layout}&gt;
        &lt;Route exact path="/" component={Status} /&gt;
        &lt;Route path="/welcome" component={Welcome} /&gt;
      &lt;/Route&gt;
      &lt;Route path="/signup" component={SignUp} /&gt;
      &lt;Route path="/signin" component={SignIn} /&gt;
    &lt;/Router&gt;
  );
  </code></pre>
  
  <pre><code>// Layout.tsx
  
  return (
    &lt;React.Fragment&gt;
      &lt;Header lastName="Wahaha" /&gt;
      &lt;Navbar /&gt;
      {children}
      &lt;Footer description="Thanks for visiting!" /&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p><code>&lt;Header /&gt;</code>, <code>&lt;Navbar /&gt;</code>, and <code>&lt;Footer /&gt;</code> are not appeared though.</p>
  
  <p>Took a reference from here: <a href="https://stackoverflow.com/questions/33996484/using-multiple-layouts-for-react-router-components">Using multiple layouts for react-router components</a> but it doesn't work for me.</p>
  
  <p>Please help.</p>