How to use multiple layouts in ReactJS app

Introduction

Hello Developers

Today we are going to see how we can use multile layouts in ReactJS app.

Requirements

This example is for beginners. I hope you know how to setup react project.

Dependencies

Only "react-router-dom" required for page urls. No other dependencies are required.

So lets start with create new project.
npx create-react-app multiple-layouts

Now we have basic project setup. Install 'react-router-dom' for routes.
npm install react-router-dom

Now setup and install tailwindcss.



npm install -D tailwindcss

npx tailwindcss init

=> Now update the tailwind.config.js file with following code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Once setup complete, we are ready to update our files in project. So create/update files as follows.

App.js



import { Route, Routes } from "react-router-dom";
import Frontend from "./components/frontend/Frontend";
import Backend from "./components/backend/Backend";
import Home from "./components/Home";
import Admin from "./components/Admin";
import About from "./components/About";
import Error from "./components/Error";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Frontend />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>

        <Route path="/admin" element={<Backend />}>
          <Route index element={<Admin />} />
        </Route>
        <Route path="*" element={<Error/>}/>
      </Routes>
    </div>
  );
}

export default App;

index.css



@tailwind base;
@tailwind components;
@tailwind utilities;

components/About.jsx



import React from 'react'

function About() {
  return (
    <div>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere aspernatur sit quidem dignissimos ipsum, rerum rem neque perspiciatis, molestias porro sed molestiae aperiam ratione. \.
    </div>
  )
}

export default About

components/Admin.jsx



import React from 'react'

function Admin() {
  return (
    <div className='text-left'>
      <h1>Admin Page</h1>
      <p className=' leading-loose'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo excepturi, eligendi quos, id mollitia cum doloremque qui ipsum maiores suscipit optio?  fugiat.</p>
      <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dolor ipsam molestias sunt architecto totam facere quo, porro saepe quod autem corporis amet magnam quis, possimus minima fugiat eius numquam praesentium? </p>
    </div>
  )
}

export default Admin

components/Error.jsx



import React from 'react'

function Error() {
  return (
    <div>Page Not Found</div>
  )
}

export default Error

We creating above file so we can show error page if route not found.

components/Home.jsx



import React from 'react'

function Home() {
  return (
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem inventore incidunt, at nostrum ab quas voluptatem iure, iste assumenda, rerum architecto esse fuga! Voluptatibus necessitatibus accusamus aut libero fugiat laudantium, ea exercitationem. Deleniti illum esse iure eligendi eos accusamus !</div>
  )
}

export default Home

Layout files

components/backend/Backend.jsx



import React from "react";
import { Outlet } from "react-router-dom";
import LeftMenu from "./LeftMenu";

function Backend() {
  return (
    <div className="flex items-start gap-3">
      <div>
        <LeftMenu />
      </div>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

export default Backend;

components/backend/LeftMenu.jsx



import React from 'react'
import { Link } from 'react-router-dom'

function LeftMenu() {
  return (
    <div>
      <h1 className='text-2xl'>Admin Layout</h1>
      <ul className='flex flex-col gap-3 px-4 py-2 '>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/admin">Admin</Link></li>
        </ul>
    </div>
  )
}

export default LeftMenu

components/frontend/Footer.jsx



import React from 'react'

function Footer() {
  return (
    <div className='flex gap-3 justify-center bg-blue-300 px-4 py-2 rounded'>
      &copy; 2023, Author: Deepak Singh Kushwah
    </div>
  )
}

export default Footer

components/frontend/Frontend.jsx



import React from 'react'
import { Outlet } from 'react-router-dom'
import Footer from './Footer'
import Header from './Header'

function Frontend() {
  return (
    <div>
        <Header/>
            <Outlet/>
        <Footer/>
    </div>
  )
}

export default Frontend

components/frontend/Header.jsx



import React from 'react'
import { Link } from 'react-router-dom'

function Header() {
  return (
    <div>
        <ul className='flex gap-3 bg-blue-300 px-4 py-2 rounded'>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
            <li><Link to="/admin">Admin</Link></li>
        </ul>
    </div>
  )
}

export default Header

Okay, if you have followed, I hope your application will run same as mine. Run following command from your prompt.

npm install
npm start

If you see menu with multiple layout, congratulations, you have implemented multiple layouts in your react app.

I hope you enjoyed it. Full code can be access here.

https://bitbucket.org/deepaksinghkushwah/dev-to-projects/src/main/multiple-layouts/

Happy Coding

Blog

How to use multiple layouts in ReactJS app

Deepak Singh Kushwah

Introduction

Requirements

Dependencies

Join Our Newsletter. No Spam, Only the good stuff.

Related