React Router Basics

Install the router

From your Vite project folder:

npm install react-router-dom

Wrap the app

Provide the router once near the root, then declare routes.

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>
  );
}

Use Link, not raw anchors alone

Link updates the URL without a full browser reload. Prefer it for in-app navigation.

Read a route param

Dynamic segments appear on useParams.

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

function UserPage() {
  const { userId } = useParams();
  return <p>User {userId}</p>;
}

// <Route path="/users/:userId" element={<UserPage />} />