Trying to render multiple layouts with React Router V5

Question

I have a react app with 2 different layouts, "main layout" and "auth layout". I found the my main layout pages work no problem but it doesn't appear to load the auth layout pages. If I try and visit "/login", I get a blank main layout page which makes me think it's only hitting the first <Route> section.

<div className="App">
  <Provider store={store}>
    <BrowserRouter>
      <Switch>
        <Route>
          <MainLayout>
            <Switch>
              <Route path="/" exact component={Dashboard} />
              <Route path="/search" exact component={SearchResults} />
              <Route path="/user/:user_id" exact component={Profile} />
              <PrivateRoute path="/settings" exact component={Settings} />
              <Route
                path="/communities"
                exact
                component={CommunityDashboard}
              />
              <PrivateRoute
                path="/communities/new"
                exact
                component={CommunityNew}
              />
              <Route
                path="/communities/view/:community_id"
                exact
                component={CommunityView}
              />
              <PrivateRoute
                path="/communities/edit/:community_id"
                exact
                component={CommunityEdit}
              />
              <Route path='/404' component={Error404} />
            </Switch>
          </MainLayout>
        </Route>
        <Route>
          <AuthLayout>
            <Switch>
              <Route
                path="/password-reset/:reset_key?"
                exact
                component={PasswordReset}
              />
              <Route path="/register" exact component={Register} />
              <Route path="/login" exact component={Login} />
            </Switch>
          </AuthLayout>
        </Route>

        <Redirect from='*' to='/404' />
      </Switch>
    </BrowserRouter>
  </Provider>
</div>

I understand that Switch will render the first <Route> that matches and is probably why my setup isn't working. How can I render both layouts without messing with the paths I've already made?

Answer 1

To ensure proper rendering of the AuthLayout for authentication-related routes ("/password-reset", "/register", "/login"), you might need to restructure your routes. Here's an example of how you could modify the route configuration:

<div className="App">
<Provider store={store}>
    <BrowserRouter>
        <Switch>
            <Route path="/password-reset/:reset_key?" exact>
                <AuthLayout>
                    <PasswordReset />
                </AuthLayout>
            </Route>
            <Route path="/register" exact>
                <AuthLayout>
                    <Register />
                </AuthLayout>
            </Route>
            <Route path="/login" exact>
                <AuthLayout>
                    <Login />
                </AuthLayout>
            </Route>
            {/* Other MainLayout routes */}
            <Route>
                <MainLayout>
                    <Switch>
                        <Route path="/" exact component={Dashboard} />
                        <Route path="/search" exact component={SearchResults} />
                        <Route path="/user/:user_id" exact component={Profile} />
                        <PrivateRoute path="/settings" exact component={Settings} />
                        <Route path="/communities" exact component={CommunityDashboard} />
                        <PrivateRoute path="/communities/new" exact component={CommunityNew} />
                        <Route path="/communities/view/:community_id" exact component={CommunityView} />
                        <PrivateRoute path="/communities/edit/:community_id" exact component={CommunityEdit} />
                        <Route path='/404' component={Error404} />
                    </Switch>
                </MainLayout>
            </Route>
            <Redirect from='*' to='/404' />
        </Switch>
    </BrowserRouter>
</Provider>

By nesting the specific routes within their respective layouts (AuthLayout for authentication-related routes and MainLayout for the rest), you can ensure that the correct layout gets applied to the corresponding routes.

Ensure that AuthLayout and MainLayout are components properly defining their layout structure and handling the rendering of children components accordingly. This structure should help in rendering the appropriate layout for different sets of routes in your React app.