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