React Router Basics

React Router (v7) maps URLs to components. In data mode you create a router with createBrowserRouter and render <RouterProvider>; in declarative mode you use <BrowserRouter> with <Routes>. Navigate with <Link>/<NavLink> (no full page reloads) or useNavigate(), and read dynamic segments with useParams(). In v7 everything is imported from react-router.

import { createBrowserRouter, RouterProvider, Link, useParams } from "react-router";

function ProductPage() {
  const { productId } = useParams();       // "/products/42" → "42"
  return <h1>Product {productId}</h1>;
}

const router = createBrowserRouter([
  { path: "/", element: <Home /> },
  { path: "/products/:productId", element: <ProductPage /> },
  { path: "*", element: <NotFound /> },
]);

export function App() {
  return <RouterProvider router={router} />;
}

// Navigation
<Link to="/products/42">View product</Link>

Common pitfalls

• Using <a href> for internal links, causing full page reloads.
• Forgetting a catch-all 404 route.
• Treating useParams() values as numbers — they're strings (or undefined).

Key points

• Routes map URLs to components
• Link avoids full reloads
• Params are strings

Further reading: React Router: routing