Client-side routing lets a single-page React application show different views for different URLs without a full page reload, typically handled by the React Router library.

Syntax

npm install react-router-dom

Deep Dive Course

Because a React single-page application is really just one HTML page that JavaScript dynamically updates, it needs its own mechanism to keep the browser's URL bar in sync with what's currently displayed, and to update the displayed content when the URL changes, whether from a link click or the browser's back/forward buttons — that's exactly what client-side routing provides. React Router, the de facto standard routing library for React, uses the browser's History API under the hood to update the URL without triggering an actual server round-trip and full page reload, intercepting navigation and rendering the appropriate component tree for the current URL instead.

1Understanding Routing

💡

Client-side routing exists specifically to avoid full page reloads on navigation — if a navigation still causes a full page refresh, something is bypassing React Router's routing mechanism, like a plain <a> tag instead of React Router's Link component.

editor.html

# Terminal
npm install react-router-dom

localhost:3000

2Practical Example

Here is a real-world application of Routing showing how it is used in production React code.

editor.html

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

localhost:3000

3Best Practices

Follow these guidelines when working with Routing:

1. Use React Router's Link component instead of a plain <a> tag for internal navigation, so routing stays client-side without a full page reload

2. Wrap the application in a BrowserRouter near the root, so routing components anywhere in the tree can access the current location

3. Define routes declaratively with Route elements, matching URL patterns to the components that should render for them

⚠️

Tip: Client-side routing exists specifically to avoid full page reloads on navigation — if a navigation still causes a full page refresh, something is bypassing React Router's routing mechanism, like a plain <a> tag instead of React Router's Link component.

editor.html

# Terminal
npm install react-router-dom

localhost:3000

Examples

Example 01Basic Usage

# Terminal
npm install react-router-dom

Example 02Advanced Example

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Best Practices

Use React Router's Link component instead of a plain tag for internal navigation, so routing stays client-side without a full page reload
Wrap the application in a BrowserRouter near the root, so routing components anywhere in the tree can access the current location
Define routes declaratively with Route elements, matching URL patterns to the components that should render for them

Interview Question

Why does React Router avoid a full page reload when navigating between routes, and what browser mechanism does it rely on to update the URL instead?▼

Hint: Think about the browser's History API, and what it lets JavaScript do to the URL bar without triggering an actual server request.

React Router relies on the browser's History API, specifically methods like history.pushState(), which let JavaScript change the URL shown in the address bar and add a new entry to the browser's session history, without the browser actually requesting a new page from the server or reloading the current one. When a user clicks a React Router Link, instead of letting the browser perform its default full-navigation behavior for an <a> tag, React Router intercepts that click, calls pushState() to update the URL, and then internally re-renders whichever component tree matches that new URL, all within the same already-loaded page and JavaScript application state. This is exactly what makes single-page application navigation feel instant, no server round-trip, no full page reload, no losing in-memory application state, while still keeping the URL bar, and the browser's back/forward button behavior, working correctly.

Exercises

MediumPractice using Routing in a real scenario.

View Solution

# Terminal
npm install react-router-dom

Frequently Asked Questions

Why does React Router avoid a full page reload when navigating between routes, and what browser mechanism does it rely on to update the URL instead?▼

React Router relies on the browser's History API, specifically methods like history.pushState(), which let JavaScript change the URL shown in the address bar and add a new entry to the browser's session history, without the browser actually requesting a new page from the server or reloading the current one. When a user clicks a React Router Link, instead of letting the browser perform its default full-navigation behavior for an tag, React Router intercepts that click, calls pushState() to update the URL, and then internally re-renders whichever component tree matches that new URL, all within the same already-loaded page and JavaScript application state. This is exactly what makes single-page application navigation feel instant, no server round-trip, no full page reload, no losing in-memory application state, while still keeping the URL bar, and the browser's back/forward button behavior, working correctly.

Related Functions

react-router-dombrowserrouterroute