DEV Community

loading...

react router v5 multiple layouts

xavivzla profile image xavier gonzalez ・1 min read

Repository Github

React Router V5 multiple layouts

If you want to test the project you can go to this Edit React Router V5 Multiple Layout or clone the repository

  yarn or npm install
Enter fullscreen mode Exit fullscreen mode

with this router structure the re-rendering that is caused when changing routes is avoided

In this demo we have two layouts:

  • Admin
  • Main

The routes

  • /
  • /about
  • /login
  • /admin
  • /admin/setting

Example file router


import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import Main from '../containers/layouts/Main'
import MainAdmin from '../containers/layouts/MainAdmin'

// views
import About from '../containers/views/Main/About'
import Home from '../containers/views/Main/Home'
import Login from '../containers/views/Main/Login'

// admin Views

import Dashboard from '../containers/views/Admin/Dashboard'
import Setting from '../containers/views/Admin/Setting'


export default () => {

  return (
    <Router>
      <Switch>
        <Route path='/login' component={Login} />


        <Route path='/admin/:path?' exact>
          <MainAdmin>
            <Switch>
              <Route path='/admin' exact component={Dashboard} />
              <Route path='/admin/setting' component={Setting} />
            </Switch>
          </MainAdmin>
        </Route>

        <Route>
          <Main>
            <Switch>
              <Route path='/' exact component={Home} />
              <Route path='/about' component={About} />
            </Switch>
          </Main>
        </Route>


      </Switch>
    </Router>
  )

}
Enter fullscreen mode Exit fullscreen mode

structure folder routers


  └── src
      ├── components
      │   └── Common
      │       ├── Header
      │       └── Footer
      ├── containers
      │   ├── views
      │       ├── Main.jsx
      │       └── MainAdmin.jsx
      │   └── views
      │       └── Admin
      │           ├── Dashboard
      │           └── Setting
      │       └── Main
      │           ├── About
      │           ├── Home
      │           └── Login
      ├── routes
      │   └── index.js
Enter fullscreen mode Exit fullscreen mode

Edit React Router V5 Multiple Layout

Discussion (8)

pic
Editor guide
Collapse
mortezasabihi profile image
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>
Enter fullscreen mode Exit fullscreen mode

React dev tools

How can i fix that?

Collapse
arturzxc profile image
arturzxc • Edited

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.

Collapse
charlie91 profile image
Charlie91 • Edited

Have you tried to lift up ‘Switch’?

Collapse
nolandubeau profile image
Nolan Dubeau

Hi, thanks for the great article. I was wondering if you can explain how to pass parameters to the different layouts? i.e if I wanted to have a dynamic view (or header) display inside a layout based on the child route.

Collapse
lucifer955 profile image
Nadeera Hashan Kuruppu

Thank you. So simple

Collapse
pablomdd profile image
Pablo Domínguez Durán

I loved it, thanks!

Collapse
alirezanejat008 profile image
alirezanejat008

Thanks a lot! But the structure in your picture have a wrong word! Just below of the containers word, there is views folder and it must changed to layouts. Thanks again.

Collapse
szharkov profile image
Serhii

So simple, so perfect. Genius.