title: React Router with Multiple Switches Rendering Only First Switch Components
body: <p>I am working on a React App and is facing an issue as described below</p>
  <p>This is my main Route Component having different layouts so I structured it like this.</p>
  <pre><code>export const AppRoutes = () =&gt; {
    return (
      &lt;Switch&gt;
        &lt;AuthRoute&gt;
          &lt;PublicRoutes /&gt;
        &lt;/AuthRoute&gt;
        &lt;PostRegistrationRoute&gt;
          &lt;PostRegistraionRoutes /&gt;
        &lt;/PostRegistrationRoute&gt;
      &lt;/Switch&gt;
    );
  };
  </code></pre>
  <p>My PublicRoutes file looks like below</p>
  <pre><code>const PublicRoutes = () =&gt; {
    return (
      &lt;Switch&gt;
        &lt;Route path=&quot;/login&quot; component={SignIn}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/signup&quot; component={SignUp}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/confirm/:token?&quot; component={ConfirmEmail}&gt;&lt;/Route&gt;
        &lt;Route
          path=&quot;/complete-your-profile&quot;
          component={CompleteYourProfile}
        &gt;&lt;/Route&gt;
        &lt;Route path=&quot;/forgot-password&quot; component={ForgotPassword}&gt;&lt;/Route&gt;
        &lt;Route path=&quot;/reset-password/:token?&quot; component={ResetPassword}&gt;&lt;/Route&gt;
      &lt;/Switch&gt;
    );
  };
  </code></pre>
  <p>This is second Route file with Switch</p>
  <pre><code>const PostRegistraionRoutes = () =&gt; {
    return (
      &lt;Switch&gt;
        &lt;Route path=&quot;/pricing-plans&quot; component={PricingPlans}&gt;&lt;/Route&gt;
        &lt;Route
          path=&quot;/payment-success/:subscription_id/:invoice_id&quot;
          component={PaymentSuccess}
        &gt;&lt;/Route&gt;
      &lt;/Switch&gt;
    );
  };
  
  export default PostRegistraionRoutes;
  </code></pre>
  <p>AuthLayout File</p>
  <pre><code>interface ChildrenProp {
    children: ReactChild | ReactChildren;
  }
  const AuthRoute = ({ children }: ChildrenProp) =&gt; {
    const { state: AuthState } = useContext(AuthContext);
  
    return (
      &lt;&gt;
        {AuthState.isAuthenticated === false &amp;&amp; &lt;&gt;{children}&lt;/&gt;}
        {AuthState.isAuthenticated !== false &amp;&amp; (
          &lt;&gt;
            &lt;Redirect to=&quot;/&quot; /&gt;
          &lt;/&gt;
        )}
      &lt;/&gt;
    );
  };
  export default AuthRoute;
  </code></pre>
  <p>PostRegistrationLayout is also almost similar so not posting the code for that.</p>
  <p>My problem is that I am able to just see routes from one file either AuthRoutes or PostRegistration routes. The one I keep at top of main routes file works. If in the main file I put PostRegistrationRoute above AuthRoutes then it starts rendering PostRegistrationRoute and shows blank page for AuthRoutes.</p>
  <p>Using React Router v5</p>
  <p>Kindly help in resolving the issue or suggest an idea for the same.</p>