Discussion on: react router v5 multiple layouts

[Morteza Sabihi]

Hi, thanks for your great article. but i have a problem with multiple layout for one route prefix. In this situation react loads both layouts. this is my code:

      <Route path="/admin/:path?">
        <DefaultLayout>
          <Switch>
            <PrivateRoute path="/admin" exact component={DashboardPage} />
            <PrivateRoute path="/admin/category" component={CategoryPage} />
          </Switch>
        </DefaultLayout>

        <AuthLayout>
          <Switch>
            <Route path="/admin/login" component={LoginPage} />
          </Switch>
        </AuthLayout>
      </Route>

How can i fix that?

[Charlie91]

Have you tried to lift up ‘Switch’?

[arturzxc]

IMMO the route should not be /admin/login but rather something like /auth/login or just /login

This is because you don't know yet that the person using the login screen is an admin until they have logged on.