title: Nested routes with react router v4 / v5
body: <p>I am currently struggling with nesting routes using react router v4.</p>
  <p>The closest example was the route config in the
  <a href="https://react-router.now.sh/" rel="nofollow noreferrer">React-Router v4 Documentation</a>.</p>
  <p>I want to split my app in 2 different parts.</p>
  <p>A frontend and an admin area.</p>
  <p>I was thinking about something like this:</p>
  <pre><code>&lt;Match pattern=&quot;/&quot; component={Frontpage}&gt;
    &lt;Match pattern=&quot;/home&quot; component={HomePage} /&gt;
    &lt;Match pattern=&quot;/about&quot; component={AboutPage} /&gt;
  &lt;/Match&gt;
  &lt;Match pattern=&quot;/admin&quot; component={Backend}&gt;
    &lt;Match pattern=&quot;/home&quot; component={Dashboard} /&gt;
    &lt;Match pattern=&quot;/users&quot; component={UserPage} /&gt;
  &lt;/Match&gt;
  &lt;Miss component={NotFoundPage} /&gt;
  </code></pre>
  <p>The frontend has a different layout and style than the admin area. So within the frontpage the route home, about and so one should be the child routes.</p>
  <p><code>/home</code> should be rendered into the Frontpage component and <code>/admin/home</code> should be rendered within the Backend component.</p>
  <p>I tried some other variations but I always ended in not hitting <code>/home</code> or <code>/admin/home</code>.</p>
  <h3>Final solution:</h3>
  <p>This is the final solution I am using right now. This example also has a global error component like a traditional 404 page.</p>
  <pre><code>import React, { Component } from 'react';
  import { Switch, Route, Redirect, Link } from 'react-router-dom';
  
  const Home = () =&gt; &lt;div&gt;&lt;h1&gt;Home&lt;/h1&gt;&lt;/div&gt;;
  const User = () =&gt; &lt;div&gt;&lt;h1&gt;User&lt;/h1&gt;&lt;/div&gt;;
  const Error = () =&gt; &lt;div&gt;&lt;h1&gt;Error&lt;/h1&gt;&lt;/div&gt;
  
  const Frontend = props =&gt; {
    console.log('Frontend');
    return (
      &lt;div&gt;
        &lt;h2&gt;Frontend&lt;/h2&gt;
        &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Backend&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
        &lt;Switch&gt;
          &lt;Route exact path='/' component={Home}/&gt;
          &lt;Route path='/user' component={User}/&gt;
          &lt;Redirect to={{
            state: { error: true }
          }} /&gt;
        &lt;/Switch&gt;
        &lt;footer&gt;Bottom&lt;/footer&gt;
      &lt;/div&gt;
    );
  }
  
  const Backend = props =&gt; {
    console.log('Backend');
    return (
      &lt;div&gt;
        &lt;h2&gt;Backend&lt;/h2&gt;
        &lt;p&gt;&lt;Link to=&quot;/admin&quot;&gt;Root&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/admin/user&quot;&gt;User&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/&quot;&gt;Frontend&lt;/Link&gt;&lt;/p&gt;
        &lt;p&gt;&lt;Link to=&quot;/admin/the-route-is-swiggity-swoute&quot;&gt;Swiggity swooty&lt;/Link&gt;&lt;/p&gt;
        &lt;Switch&gt;
          &lt;Route exact path='/admin' component={Home}/&gt;
          &lt;Route path='/admin/user' component={User}/&gt;
          &lt;Redirect to={{
            state: { error: true }
          }} /&gt;
        &lt;/Switch&gt;
        &lt;footer&gt;Bottom&lt;/footer&gt;
      &lt;/div&gt;
    );
  }
  
  class GlobalErrorSwitch extends Component {
    previousLocation = this.props.location
  
    componentWillUpdate(nextProps) {
      const { location } = this.props;
  
      if (nextProps.history.action !== 'POP'
        &amp;&amp; (!location.state || !location.state.error)) {
          this.previousLocation = this.props.location
      };
    }
  
    render() {
      const { location } = this.props;
      const isError = !!(
        location.state &amp;&amp;
        location.state.error &amp;&amp;
        this.previousLocation !== location // not initial render
      )
  
      return (
        &lt;div&gt;
          {          
            isError
            ? &lt;Route component={Error} /&gt;
            : &lt;Switch location={isError ? this.previousLocation : location}&gt;
                &lt;Route path=&quot;/admin&quot; component={Backend} /&gt;
                &lt;Route path=&quot;/&quot; component={Frontend} /&gt;
              &lt;/Switch&gt;}
        &lt;/div&gt;
      )
    }
  }
  
  class App extends Component {
    render() {
      return &lt;Route component={GlobalErrorSwitch} /&gt;
    }
  }
  
  export default App;
  </code></pre>