React Router

• React Router is a library used to handle navigation (routing) in React applications.

• It allows you to create multiple pages in a Single Page Application (SPA) without reloading the page.

Why Use React Router?

Without routing:

• Only one page UI

• No navigation between components

With React Router:

• Multiple pages (Home, About, Contact)

• URL-based navigation

• Dynamic routing

• Nested layouts

• Protected routes (Login required pages)

📦 Installation

javascript

npm install react-router-dom

Basic Setup

Wrap App with BrowserRouter

javascript

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

function App() {
  return (
    <BrowserRouter>
      {/* Your app */}
    </BrowserRouter>
  );
}

Core Components

1. Link

Used to navigate between pages

javascript

<Link to="/about">About</Link>

🔹 2. Routes

Container for all routes

🔹 3. Route

Defines mapping between URL and component

plaintext

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

Basic Example

plaintext

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>Home Page</h1>;
}

function About() {
  return <h1>About Page</h1>;
}

function Contact() {
  return <h1>Contact Page</h1>;
}

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link> |
        <Link to="/about">About</Link> |
        <Link to="/contact">Contact</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Nested Routing

Route inside another route

Use Outlet

plaintext

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

function Products() {
  return (
    <div>
      <h1>Products</h1>
      <Outlet />
    </div>
  );
}

Example

plaintext

<Route path="/products" element={<Products />}>
  <Route path="car" element={<CarProducts />} />
  <Route path="bike" element={<BikeProducts />} />
</Route>

URL Structure

• /products/car → CarProducts

• /products/bike → BikeProducts

NavLink

Special Link with active state

plaintext

import { NavLink } from "react-router-dom";

const style = ({ isActive }) => ({
  color: isActive ? "blue" : "black",
  fontWeight: isActive ? "bold" : "normal"
});

<NavLink to="/" style={style}>Home</NavLink>

URL Parameters (Dynamic Routing)

Used for dynamic data in URL

Example URL:

plaintext

/customer/Anil

🔹 Route Setup

plaintext

<Route path="/customer/:name" element={<User />} />

🔹 Access Params

plaintext

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

function User() {
  const { name } = useParams();
  return <h1>Hello {name}</h1>;
}

Important Concepts

SPA (Single Page Application)

• Page reload नहीं होता

• Only component changes

🔸 Outlet

• Child component render करने की जगह

🔸 Dynamic Routing

• URL बदलता है → UI बदलता है

Interview Questions (Must Prepare)

1. What is React Router?

2. Difference between Link and NavLink

3. What is Outlet?

4. What are URL parameters?

5. Difference between SPA and MPA

6. How routing works internally?

Summary

• React Router → Navigation system

• BrowserRouter → Wrap app

• Routes + Route → Define paths

• Link → Navigation

• NavLink → Active styling

• Outlet → Nested routing

• useParams → Dynamic data