React Router Basics

React Router Basics

React Router is the standard library for navigation in React apps. It maps URLs to components so users can share links and use the back button just like a classic website.

Wrapping the app

Install with npm install react-router-dom. Then wrap your app in a BrowserRouter:

import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>...</Routes>
    </BrowserRouter>
  );
}

Defining routes

Routes match a URL pattern to a component:

<Routes>
  <Route path="/" element=<Home /> />
  <Route path="/about" element=<About /> />
</Routes>

The Routes element groups route definitions and picks the best match for the current location.

Navigation links

Use Link instead of a plain anchor to avoid a full page reload:

<Link to="/about">About us</Link>

NavLink works the same way and adds an active class when its route is current, handy for menus.

Route parameters

Dynamic segments capture a part of the URL:

<Route path="/post/:id" element=<Post /> />

Read the parameter inside the component with useParams:

const { id } = useParams();

Not found pages

A path of * catches any unmatched URL, so you can show a friendly 404 page.

<Route path="*" element=<NotFound /> />

Key Points

• BrowserRouter wraps the navigation tree.
• Routes define how URL paths map to components.
• Link switches views without reloading the page.
• useParams reads dynamic URL segments.
• A wildcard route creates a 404 fallback.