React Router — Routes, Link, useNavigate & Params

React Router — client-side navigation

React Router lets multiple pages live in one React app without full page reloads. The URL changes; React swaps components.

Install: npm install react-router-dom. Wrap your app in BrowserRouter.

Real-life example: React Router is like TV channels — same TV (app), different shows (pages) when you change the channel (URL).

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/learn">Learn</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/learn" element={<LearnPage />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

Routes & Link

Route maps a URL path to a component. Link creates accessible navigation anchors that do not reload the page.

Real-life example: Routes are floor numbers in a building directory. Link is the elevator button that takes you there without rebuilding the building.

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

useNavigate — programmatic navigation

Call navigate('/path') after login, logout, or form success instead of showing a Link.

Real-life example: useNavigate is a GPS redirect — after you pay, the app automatically drives you to the receipt page.

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

function LoginForm() {
  const navigate = useNavigate();

  function handleLogin() {
    // ... auth logic
    navigate("/dashboard");
  }

  return <button onClick={handleLogin}>Log in</button>;
}

URL Params — useParams

Dynamic segments like :slug become params you read with useParams().

Real-life example: Params are the order ID in a food delivery URL — same page layout, different order details each time.

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

function CourseDetail() {
  const { slug } = useParams();
  return <h1>Course: {slug}</h1>;
}

// URL /courses/react-complete-guide → slug = "react-complete-guide"