Nested Routes in React Explained

 🚦 Setting Up React Router (v6)

React Router v6 introduced a more declarative and simplified API. It's lighter and faster than v5 and supports features like route nesting and layout routes out of the box.

✅ 1. Install React Router DOM

In your React project directory, run:

bash

Copy

Edit

npm install react-router-dom@6

Or using Yarn:

bash

Copy

Edit

yarn add react-router-dom@6

🧱 2. Basic Project Structure

css

Copy

Edit

src/

├── App.js

├── index.js

├── pages/

│   ├── Home.js

│   ├── About.js

│   ├── Contact.js

└── routes/

    └── AppRoutes.js

🧩 3. Define Pages (Components)

pages/Home.js

jsx

Copy

Edit

function Home() {

  return <h1>Home Page</h1>;

}

export default Home;

Repeat for About.js and Contact.js.

🔁 4. Set Up Routing

AppRoutes.js

jsx

Copy

Edit

import { Routes, Route } from 'react-router-dom';

import Home from '../pages/Home';

import About from '../pages/About';

import Contact from '../pages/Contact';

const AppRoutes = () => {

  return (

    <Routes>

      <Route path="/" element={<Home />} />

      <Route path="/about" element={<About />} />

      <Route path="/contact" element={<Contact />} />

    </Routes>

  );

};

export default AppRoutes;

App.js

jsx

Copy

Edit

import { BrowserRouter } from 'react-router-dom';

import AppRoutes from './routes/AppRoutes';

function App() {

  return (

    <BrowserRouter>

      <AppRoutes />

    </BrowserRouter>

  );

}

export default App;

🔗 5. Add Navigation

Example Navigation Bar:

jsx

Copy

Edit

import { Link } from 'react-router-dom';

function Navbar() {

  return (

    <nav>

      <Link to="/">Home</Link> |{" "}

      <Link to="/about">About</Link> |{" "}

      <Link to="/contact">Contact</Link>

    </nav>

  );

}

export default Navbar;

Add <Navbar /> inside your App.js or a layout component.

🌲 6. Nested Routes Example

You can nest routes using layout components.

Example Structure:

jsx

Copy

Edit

<Routes>

  <Route path="/" element={<Layout />}>

    <Route index element={<Home />} />

    <Route path="about" element={<About />} />

    <Route path="contact" element={<Contact />} />

  </Route>

</Routes>

Layout Component (Layout.js)

jsx

Copy

Edit

import { Outlet, Link } from 'react-router-dom';

const Layout = () => {

  return (

    <div>

      <nav>

        <Link to="/">Home</Link> |{" "}

        <Link to="/about">About</Link> |{" "}

        <Link to="/contact">Contact</Link>

      </nav>

      <hr />

      <Outlet />

    </div>

  );

};

export default Layout;

❓ 7. Handling 404s (Not Found)

Add a catch-all route at the end:

jsx

Copy

Edit

<Route path="*" element={<h2>Page Not Found</h2>} />

⚙️ Bonus: Programmatic Navigation

Use the useNavigate hook:

jsx

Copy

Edit

import { useNavigate } from 'react-router-dom';

const Button = () => {

  const navigate = useNavigate();

  return (

    <button onClick={() => navigate('/about')}>

      Go to About

    </button>

  );

};

🧠 Summary

Feature React Router v6 Syntax

Routing setup <Routes>, <Route path="" element={...} />

Nesting Use <Outlet /> in layout components

Navigation <Link to="/path">, useNavigate()

Catch-all route <Route path="*" element={<NotFound />} />

Learn React JS Course in Hyderabad

Read More

Setting Up React Router (v6)

🌐 React Router & Navigation

Best Practices for Managing Forms in React

Integrating React with Yup for Validation

Visit Our Quality Thought Training in Hyderabad

Get Directions

June 21, 2025

Subscribe by Email

Follow Updates Articles from This Blog via Email