title: React-router - How to use multiple private routes?
body: <p>My project have 2 different roles and both need login.</p>
  
  <p>So I created 2 login pages and 2 private routes are <code>Auth</code> and <code>Trainee</code></p>
  
  <p>The problem is even I type an url is not children of <code>Auth</code> route it will go through <code>Auth</code> then it all wrong after that</p>
  
  <pre><code>&lt;BrowserRouter&gt;
        &lt;Switch&gt;
          &lt;Route
            exact
            path={LoginForAuthPath}
            component={LoginForAuthComponent}
          /&gt;
          &lt;Route
            exact
            path={LoginForTraineePath}
            component={LoginForTraineeComponent}
          /&gt;
          &lt;Auth&gt;
            &lt;Route
              exact
              path={SomeAuthPath}
              component={SomeAuthComponent}
            /&gt;
          &lt;/Auth&gt;
          &lt;Trainee&gt;
            &lt;Route
              exact
              path={SomeTraineePath}
              component={SomeTraineeComponent}
            /&gt;
          &lt;/Trainee&gt;
        &lt;/Switch&gt;
      &lt;/BrowserRouter&gt;
  </code></pre>
  
  <pre><code>class Auth extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        loggedIn: isLoggedIn(),
      };
    }
  
    render() {
      return this.state.loggedIn ? (
        &lt;Route children={this.props.children} /&gt;
      ) : (
        &lt;Redirect to={LoginPath} /&gt;
      );
    }
  }
  </code></pre>