React Router Nested Dom - GeekyShows
Tags: webdev, javascript, react, beginners
Published: 2023-01-12 10:37:09

**Output Image :**

![Output Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6izkqpbzt2z43j7car19.png)


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



**Folder Image**
![Folder Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/64op25doyvd0ge5gdueb.png)


**App.js Code**
``` react
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**
``` react
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**

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

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

export default PostLayout

```
**About.js Code**

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

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

export default About

```
**Contact.js Code**

``` react
import React from 'react'

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

export default Contact

```
**Home.js Code**

``` react
import React from 'react'

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

export default Home

```
**Post.js Code**

``` react
import React from 'react'

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

export default Post

```
**PostDetail.js Code**

``` react
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](https://www.instagram.com/full_stack_web_developer1/)
[Instagram](https://www.youtube.com/@aksh_desai/)