Based on the uploaded 11-page “Finalrouting” notes

React Routing

Learn how URLs connect to React pages and components using React Router — from basic routes and navigation to parameters, query strings, nested routes, and a 404 fallback.

BrowserRouter Routes Route Link NavLink useParams useSearchParams Outlet

1. What Is Routing?

Routing means connecting a URL with a particular page or component.

URLPage
/Home page
/aboutAbout page
/coursesCourses page
Main idea: In a React application, routing lets users move between pages without loading a completely new web page.
URL
→
Route match
→
React component
→
Screen

2. Installing React Router

The source uses React Router as the library for creating routes in React applications.

npm install react-router-dom

Creating the project

npm create vite@latest routing-app -- --template react
cd routing-app
npm install
npm install react-router-dom
npm run dev
Open the URL shown in the terminal after starting the development server.

3. Basic Routing

Use BrowserRouter, Routes, and Route to create pages.

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

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

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

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Interactive basic router simulation

Home

Current route: /

What happens? Selecting /about changes the URL state in the example and displays the About component.

6. Page Not Found — Fallback Route

Use path="*" for unknown URLs.

function NotFound() {
  return <h1>Page Not Found</h1>;
}

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

Fallback route simulator

Page Not Found

No route matched /unknown.

7. URL Parameters

Use :paramName in the path and useParams() to read it.

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

function Student() {
  const { id } = useParams();
  return <h1>Student {id}</h1>;
}

<Routes>
  <Route
    path="/students/:id"
    element={<Student />}
  />
</Routes>

Interactive URL parameter

URL: /students/101 → Student 101
The source also presents a route with two parameters: /students/:id/:name, where both values are read with useParams().

8. Query Strings

Query strings look like /courses?branch=CSE. Use useSearchParams() to read them.

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

function Courses() {
  const [params] = useSearchParams();
  const branch = params.get("branch") || "All";
  return <h1>Branch: {branch}</h1>;
}

Interactive query-string reader

Branch: CSE

Example URL: /courses?branch=CSE

9. Nested Routes and Outlet

Use nested routes when pages share a layout. The child route appears where the parent renders <Outlet />.

function DashboardLayout() {
  return (
    <div>
      <h1>Dashboard</h1>

      <nav>
        <NavLink to="/dashboard">Overview</NavLink>
        <NavLink to="/dashboard/reports">Reports</NavLink>
      </nav>

      <hr />
      <Outlet />
    </div>
  );
}

Interactive nested route simulator

Dashboard

Overview

Welcome to the Dashboard Overview.

Complete nested route structure

<Route path="/dashboard" element={<DashboardLayout />}>
  <Route index element={<Overview />} />
  <Route path="reports" element={<Reports />} />
</Route>
Think of Outlet as a placeholder: the parent layout stays on screen while the matched child component appears inside the <Outlet />.

10. Complete Routing Example

The source combines normal routes, URL parameters, query parameters, nested routes, active navigation, and a 404 fallback in one application.

Routes in the source

  • / → Home
  • /about → About
  • /students/:id/:name → Student
  • /courses → Courses
  • /dashboard → Dashboard layout + Overview child
  • /dashboard/reports → Reports child
  • * → NotFound

Hooks / components used

  • BrowserRouter
  • Routes and Route
  • NavLink
  • useParams
  • useSearchParams
  • Outlet
export default function App() {
  return (
    <BrowserRouter>
      <Menu />

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

        <Route
          path="/students/:id/:name"
          element={<Student />}
        />

        <Route
          path="/courses"
          element={<Courses />}
        />

        <Route
          path="/dashboard"
          element={<DashboardLayout />}
        >
          <Route index element={<Overview />} />
          <Route
            path="reports"
            element={<Reports />}
          />
        </Route>

        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Try the complete route map

Home

Current path: /

11. Quick Reference

BrowserRouterProvides routing context to the React app.
RoutesContains the route definitions.
RouteConnects a path to an element.
LinkInternal navigation without a full reload.
NavLinkNavigation link that can receive active styling.
path="*"Fallback route for unknown URLs.
useParams()Reads URL parameters such as :id.
useSearchParams()Reads query-string values.
OutletRenders the matched child route inside a parent layout.
Installation reminder: The actual React examples in the source require the react-router-dom package in a React project.

12. Quick Check

1. What is the main purpose of routing?
2. Which component provides the routing context?
3. Which should be used for internal React navigation in this lesson?
4. Which Hook reads /students/101 when the route uses :id?
5. Which Hook reads ?branch=CSE?
6. What does Outlet represent in nested routes?