In a traditional website, clicking a link makes the browser request an entirely new HTML document from the server, causing a visible flash as the page reloads. A React Single Page Application (SPA) only ever loads one HTML file — JavaScript then dynamically swaps which components are visible as the user navigates.

This is exactly what react-router-dom manages: keeping the visible components in sync with the URL, without ever triggering a full page reload, which is what makes navigation in an SPA feel instantaneous.

To enable routing at all, the entire component tree needs to be wrapped in a <BrowserRouter> component. Under the hood, BrowserRouter uses the HTML5 History API to keep React's internal notion of the current location in sync with the browser's actual URL bar.

This is also what makes the browser's back and forward buttons work correctly inside an SPA — without this provider, none of React Router's other components or hooks have any routing context to work with.

With the provider in place, actual paths get defined using a <Routes> container holding individual <Route> components. Each <Route> takes a path string describing what the URL should look like, and an element prop containing the JSX to render when that path matches.

A typical app lists several of these together, like <Route path="/" element={<Home />} /> and <Route path="/about" element={<About />} />, so <Routes> can render whichever one fits the current URL.

Standard HTML <a> tags must not be used for internal navigation, since they trigger a full page reload and destroy all React state. Instead, import <Link> from react-router-dom — it renders as a real <a> tag in the DOM (good for SEO and accessibility), but overrides the click event to perform fast client-side routing instead.

A typical navbar looks like <Link to="/">Home</Link> and <Link to="/about">About</Link> — visually identical to anchor tags, but without the destructive full-page reload.

Navigation menus often need to visually highlight whichever link corresponds to the current page. <NavLink> is a special version of <Link> that knows whether it's currently the active route.

Passing a function to its className (or style) prop, like ({ isActive }) => isActive ? 'active-link' : '', lets React Router apply conditional styling automatically based on whether that link's to matches the current URL.

When a user visits a URL that doesn't match any defined route, the app needs a "Not Found" page. React Router makes this simple: add a <Route> at the very bottom of the <Routes> list with path="*", the wildcard.

Because <Routes> evaluates matches by specificity and * is the least specific possible pattern, this catch-all route only renders when no other, more specific route matched the current URL.

Routes that share a common shape, like a user profile page, don't need a separate route written out for every possible user. Prefixing a path segment with a colon, like /users/:id, tells React Router that segment is a dynamic parameter that should match any value.

A route can even have multiple dynamic segments, such as /store/:category/:item, letting a single <Route> definition handle an entire family of URLs.

Once a dynamic route matches, the actual value from the URL still needs to be read inside the rendered component — that's what the useParams() hook is for. It returns an object containing every dynamic parameter defined in the matched route's path.

For a route defined as /users/:id, calling const { id } = useParams() inside the rendered component extracts whatever value was actually present in the URL, like '123' from /users/123.

<Link> is great for navigation the user triggers by clicking, but some navigation needs to happen from JavaScript logic itself — redirecting after a login form successfully submits, for example. React Router's useNavigate hook returns a function for exactly this.

Calling navigate('/dashboard') inside an async success handler, after await api.login() resolves, redirects the user immediately without requiring any click at all.

The Single Page App. Welcome to React Router DOM. In traditional websites, clicking a link causes the browser to make a full network request for a completely new HTML document, causing the screen to flash white. In a React Single Page Application (SPA), we only ever load ONE HTML file. We then use JavaScript to dynamically swap out which React components are currently visible, making navigation feel instantaneous.

BrowserRouter Provider. To enable routing in your application, you must wrap your entire component tree in a <BrowserRouter> component. This provider uses the HTML5 History API under the hood to sync your React state with the browser's URL bar, enabling the back/forward buttons to work seamlessly.

Defining Routes. Once the provider is in place, you define your actual paths using the <Routes> container and individual <Route> components. The <Route> component takes a path string (what the URL should look like) and an element prop containing the JSX you want to render when the URL matches that path.

Which prop on the <Route> component determines which JSX gets rendered when the URL matches?

• →render
• →component
• →element

Client-Side Links. Crucially, you MUST stop using standard HTML <a> tags for internal links. An <a> tag will trigger a full page reload, destroying your React state. Instead, import the <Link> component from React Router. It renders as an <a> tag in the DOM for SEO and accessibility, but it overrides the click event to perform lightning-fast client-side routing.

Which component completely intercepts the browser's default click behavior to allow fast, client-side routing in an SPA?

• →<a>
• →<Link>

NavLink for Menus. For navigation menus, you often want to highlight the 'active' link. React Router provides <NavLink>, a special version of <Link> that knows whether or not it is the current active route. It automatically allows you to apply conditional classes or styles based on its active state.

Catch-All 404 Pages. What happens if a user types in a URL that doesn't exist? You need a 'Not Found' page. React Router makes this incredibly easy. Simply create a route at the very bottom of your <Routes> list and set the path to the wildcard asterisk (*). This route will only trigger if no previous routes matched the URL.

Dynamic URL Parameters. Often, you need routes that share a common pattern, like a user profile page. You don't want to write a route for every user. Instead, use Dynamic Segments. By prefixing a path segment with a colon (:), you tell React Router that this portion of the URL is a variable parameter.

If you want a route to match paths like /post/45 or /post/hello-world, how should you define the route path prop?

• →"/post/$postId"
• →"/post/:postId"

The useParams Hook. Once the dynamic route is matched, you need to read the actual value out of the URL (e.g., extracting '123' from /users/123). Inside the rendered component, you use the useParams() hook. It returns an object containing all the dynamic parameters defined in your route path.

Programmatic Navigation. Links are great for users clicking around, but sometimes you need to trigger navigation programmatically from your JavaScript logic. For example, redirecting the user AFTER they successfully submit a login form. For this, React Router provides the useNavigate hook.

Which hook should you use if you need to redirect a user to a success page immediately after an API fetch completes?

• →useLocation
• →useNavigate

Nested Routes. For complex layouts, React Router supports Nested Routes. Imagine a Dashboard where the sidebar stays the same, but the inner content changes between 'Profile' and 'Settings'. You can place <Route> tags INSIDE other <Route> tags to achieve this powerful layout architecture.

Mastery Achieved. Routing mastery achieved! You now know how to architect a modern React SPA using react-router-dom v6. You can define static and dynamic routes, catch 404 errors, use safe client-side links, and trigger programmatic redirects. You are ready to build multi-page apps!