When will you use this?

Add routing when your app has more than one screen and URLs should be bookmarkable.

• Multi-page apps like dashboards use React Router — /settings, /profile, /orders.
• E-commerce sites route /product/123 to a product detail component.

Real-world: Toolliyo course SPA routes

Toolliyo is one React app with URLs /courses, /courses/:id, /profile, /quiz. React Router maps each path to a page component — bookmarks and back button work.

Production-style code

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

function App() {
  return (
    <BrowserRouter>
      <SiteHeader />
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/courses" element={<CourseCatalog />} />
        <Route path="/courses/:courseId" element={<CoursePlayer />} />
        <Route path="/profile" element={<ProfilePage />} />
        <Route path="*" element={<Navigate to="/" replace />} />
      </Routes>
    </BrowserRouter>
  );
}

What happens in production: Students share lesson URLs; marketing runs ads to /courses/react — routing is how SPAs feel like multi-page websites.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

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

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

Line-by-line walkthrough

How it works (big picture)

• BrowserRouter wraps the app.
• Routes picks the first matching Route.
• Link navigates without refresh.

Do this on your computer

1. npm install react-router-dom
2. Wrap app in BrowserRouter.
3. Add Routes with path and element.
4. Use Link instead of for internal links.
5. Read the real-world section and name which part of the app uses this topic.
6. Run the example locally and confirm the same behavior in the browser.
7. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.