DEV Community

xavier gonzalez
xavier gonzalez

Posted on

react router v5 multiple layouts

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 (
        <Route path='/login' component={Login} />

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

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


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

Top comments (8)

mortezasabihi profile image
Morteza Sabihi - #OPENTOWORK

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?">
            <PrivateRoute path="/admin" exact component={DashboardPage} />
            <PrivateRoute path="/admin/category" component={CategoryPage} />

            <Route path="/admin/login" component={LoginPage} />
Enter fullscreen mode Exit fullscreen mode

React dev tools

How can i fix that?

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.

charlie91 profile image
Charlie91 • Edited

Have you tried to lift up ‘Switch’?

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.

lucifer955 profile image
Nadeera Hashan Kuruppu

Thank you. So simple

pablomdd profile image
Pablo Domínguez Durán

I loved it, thanks!

alirezanejat008 profile image

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.

szharkov profile image

So simple, so perfect. Genius.