Routing and What’s Next

Client-side routing

npm install react-router-dom

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";nnfunction App() {n    return (n        <BrowserRouter>n            <nav>n                <Link to="/">Home</Link>n                <Link to="/courses">Courses</Link>n            </nav>nn            <Routes>n                <Route path="/" element={<Home />} />n                <Route path="/courses" element={<CourseList />} />n            </Routes>n        </BrowserRouter>n    );n}

React Router is the standard library for building a multi-page feel inside a React app without a full page reload on every navigation — clicking a Link swaps out which component renders, purely on the client, which is what makes a React app feel instant once loaded.

URL parameters

<Route path="/courses/:slug" element={<CourseDetail />} />

import { useParams } from "react-router-dom";nnfunction CourseDetail() {n    const { slug } = useParams();n    return <h1>Course: {slug}</h1>;n}

:slug captures a dynamic segment of the URL, and useParams() reads it back out inside the matched component — this is how a single CourseDetail component can render the correct content for any course, based purely on the URL.

Where to go from here

• useContext — for sharing state across many components without passing props down through every level in between
• Component libraries — most real projects lean on an existing UI library rather than styling every button from scratch
• Next.js — a popular full framework built on top of React, adding server-side rendering and file-based routing

You have completed the course

You now know JSX, props, state and hooks, event handling, data fetching, and client-side routing — enough to build a real, interactive single-page application. Take the certification assessment next to prove it.