How to use multiple layouts in ReactJS app
Tags: react, javascript, tutorial, tailwindcss
Published: 2023-03-14 16:17:07

## 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. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3p89r5dua6us9iwjvo3.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vkiztjsf4ho8ujze6zx.png)

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

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

Happy Coding