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'>
© 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
Top comments (0)