React Router Nested Dom - GeekyShows

Output Image :

Folder Image

App.js Code

import Home from "./components/pages/Home";
import About from "./components/pages/About";
import Contact from "./components/pages/Contact";
import Post from "./components/pages/Post";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./components/Layout";
import PostLayout from "./components/PostLayout";
import PostDetail from "./components/pages/PostDetail";

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route path="about" element={<About />} />
            <Route path="contact" element={<Contact />} />
            {/* <Route path="post" element={<Post />} /> */}
            <Route path="post" element={<PostLayout />} >
              <Route path=':category' element={<PostDetail />} />
              <Route index element={<Post />} />
            </Route>

            {/* <Route path="/" element={<Home />} /> */}
            <Route index element={<Home />} />
          </Route>
          <Route path="*" element={<h1> Error: Not Found </h1>} />
        </Routes>
      </BrowserRouter>
    </>
  )
}

export default App;

Layout.js Code

import React from 'react'
import { NavLink, Outlet } from "react-router-dom";

const Layout = () => {
    return (
        <>
        <h1>React Router v6</h1>
            <ul>
                <li><NavLink to="/" style={({ isActive }) => { return { backgroundColor: isActive ? "red" : "" } }}>Home</NavLink></li>
                <li><NavLink to="/about" style={({ isActive }) => { return { backgroundColor: isActive ? "green" : "" } }}>About</NavLink></li>
                <li><NavLink to="/contact" style={({ isActive }) => { return { backgroundColor: isActive ? "orange" : "" } }}>Contact</NavLink></li>
                <li><NavLink to="/post" style={({ isActive }) => { return { backgroundColor: isActive ? "pink" : "" } }}>Post</NavLink></li>
            </ul>

            <Outlet />
        </>
    )
}

export default Layout

PostLayout.js Code

import React from 'react'
import { Outlet } from "react-router-dom";

const PostLayout = () => {
    return (
        <>
            <h1>PostLayout</h1>
            <Outlet />
        </>
    )
}

export default PostLayout

About.js Code

import React from 'react'
import { Outlet } from "react-router-dom";

const About = () => {
    return (
        <>
            <h1>About Page</h1>
            <Outlet />
        </>
    )
}

export default About

Contact.js Code

import React from 'react'

const Contact = () => {
    return (
        <>
            <h1>Contact Page</h1>
        </>
    )
}

export default Contact

Home.js Code

import React from 'react'

const Home = () => {
    return (
        <>
            <h1>Home Page</h1>
        </>
    )
}

export default Home

Post.js Code

import React from 'react'

const Post = () => {
    return (
        <>
            <h1>Post Page</h1>
        </>
    )
}

export default Post

PostDetail.js Code

import React from 'react'
import { useParams } from "react-router-dom";

const PostDetail = () => {
    const { category } = useParams();
    return (
        <>
            <h1>PostDetail - {category}</h1>

        </>
    )
}

export default PostDetail

Thank You.
You can follow us on:
Youtube
Instagram