title: React router nested routes - How to redirect when no route is matching
body: <p>I'm building a web app with three main parts: The actual website, an admin part and a user part. For each part, I want a different layout wrapper.</p>
  
  <p>This is my code right now:</p>
  
  <p><strong>Website wrapper</strong></p>
  
  <pre><code>const Website = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;NavigationBar /&gt;
      &lt;main&gt;
        &lt;div className="container"&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/' component={Home}/&gt;
            &lt;Route exact path='/login' component={Login}/&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/main&gt;
      &lt;FooterBar /&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p><strong>User wrapper</strong></p>
  
  <pre><code>const User = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;UserSideBar /&gt;
      &lt;main&gt;
        &lt;div className="container"&gt;
          &lt;Switch&gt;
            &lt;Route exact path='/u/dashboard' component={UDashboard}/&gt;
            &lt;Route exact path='/u/account' component={UAccount}/&gt;
          &lt;/Switch&gt;
        &lt;/div&gt;
      &lt;/main&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p><strong>Admin wrapper</strong></p>
  
  <pre><code>const Admin = () =&gt; (
    &lt;React.Fragment&gt;
      &lt;main&gt;
      &lt;div className="container"&gt;
        &lt;Switch&gt;
          &lt;Route exact path='/a/dashboard' component={ADashboard}/&gt;
          &lt;Route exact path='/a/payments' component={APayments}/&gt;
          &lt;Route exact path='/a/account' component={AAccount}/&gt;
        &lt;/Switch&gt;
      &lt;/div&gt;
      &lt;/main&gt;
    &lt;/React.Fragment&gt;
  );
  </code></pre>
  
  <p><strong>Router</strong></p>
  
  <pre><code>const Router = () =&gt; (
      &lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route path="/u" component={User} /&gt;
          &lt;Route path="/a" component={Admin} /&gt;
          &lt;Route path="/" component={Website} /&gt;
  
          &lt;Redirect from="*" to="/" /&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  );
  </code></pre>
  
  <p>It's all working fine but if an url is not matching any of the routes, it's not redirecting to <code>'/'</code>. How can I achieve this?</p>