DEV Community

Cover image for How to use multiple layouts in ReactJS app
Deepak Singh Kushwah
Deepak Singh Kushwah

Posted on

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: [],
}


Enter fullscreen mode Exit fullscreen mode

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;



Enter fullscreen mode Exit fullscreen mode

index.css



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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

components/Error.jsx



import React from 'react'

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

export default Error


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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;



Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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.

Image description

Image description

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

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

Happy Coding

Top comments (0)