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

Comments

Post a Comment

Popular posts from this blog

Entry-Level Cybersecurity Jobs You Can Apply For Today

🔐 Entry-Level Cybersecurity Jobs in Hyderabad 1. Cyber Security Analyst – L1 Company: Wipro Limited Location: Hyderabad Salary: ₹4–6 LPA Description: Assist with internal and external audits related to information security, maintain an information security risk register, and support security operations. Source:  Glassdoor 2. Security Analyst L1 Company: UltraViolet Cyber Location: Hyderabad Salary: ₹3–4 LPA Description: Identify and triage potential security incidents based on established procedures and playbooks; familiarity with security tools is beneficial. Source:  Glassdoor 3. Associate Information Security Analyst Company: NTT DATA Location: Hyderabad Experience: Entry-level Description: Handle security incidents end-to-end, work with various security technologies, and contribute to the development of security policies. Source:  Indeed 4. Cyber Security Analyst Company: Datametrics Software Systems Location: Hyderabad Salary: ₹4–6 LPA Description: Ensure security a...
Read more

Understanding Snowflake Editions: Standard, Enterprise, Business Critical

Understanding Snowflake Editions: Standard, Enterprise, Business Critical Snowflake offers several service editions to meet different business needs. These editions provide increasing levels of features, security, and compliance, depending on your organization's size, industry, and regulatory requirements. 1. Standard Edition Best for: Small to mid-sized teams or businesses that need core data warehousing features without advanced compliance needs. Key Features: Fully managed, cloud-native data platform Support for structured and semi-structured data Virtual warehouses for compute scaling Time Travel (1 day) – lets you query past versions of data Secure data sharing between Snowflake accounts Basic security with role-based access control Use Case Example: Startups or small companies analyzing business data without strict data compliance needs. 2. Enterprise Edition Best for: Organizations that need more control, scalability, and longer data retention. Includes everything in Standar...
Read more

Installing Tosca: Step-by-Step Guide for Beginners

🧪 Installing Tosca: Step-by-Step Guide for Beginners Tosca by Tricentis is a popular test automation tool used for end-to-end functional testing across various technologies like web, desktop, APIs, and more. Whether you're new to Tosca or setting it up for a QA team, this beginner-friendly guide walks you through the installation process step by step. ✅ System Requirements Before installation, make sure your system meets the minimum requirements: 🖥️ Hardware: CPU: Dual-core or higher RAM: Minimum 8 GB (16 GB recommended) Disk: 5+ GB of free space 💻 Software: OS: Windows 10 or 11 (64-bit) .NET Framework: 4.8 or later Microsoft SQL Server (for shared workspace, optional) Admin rights to install software 🔽 Step 1: Download Tosca Go to the official Tricentis Support Portal Create an account or log in. Navigate to Downloads > Tosca Testsuite Choose the latest stable version. Download the Tosca Installer (.exe) file. 🔐 You may need a valid Tricentis license or evaluation request ...
Read more