Why doesn't the page reload during routing?

ReactJunior~2 min read

Short answer:

During routing in React, the page does not reload, because react-router (or another client-side router) intercepts link navigation and URL changes and updates the needed React components itself, without sending a new HTTP request to the server.

In more detail: what React Router does

Normally, in a browser:

when you click a link <a href="/about"> -> the browser sends a request to the server for /about; -> the server returns a new HTML file; -> the page reloads completely.

But in React it's different:

A React app is an SPA (Single Page Application): one HTML file (index.html), in which React dynamically changes the content.

When you use <Link> from react-router-dom:

javascript

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

this component:

calls preventDefault() - cancels the browser's default behavior (the page reload);
changes the URL through history.pushState() (part of the HTML5 History API);
notifies React Router that the path changed;
React Router re-renders the needed component (for example, <About />) - without a request to the server.

Visually:

Action	A regular website (server-side routing)	React SPA (client-side routing)
Clicking a link	The browser makes a new request to the server	React Router changes the URL and renders a new component
HTML	The server sends a new HTML file	The HTML stays the same (`index.html`)
JS	Loaded again	JS is already loaded, React just updates the Virtual DOM
Response time	Slower (waiting for the server's response)	Almost instant
State	Lost on reload	Kept in React's memory

Technically, this is handled by:

The HTML5 History API

React Router uses:

window.history.pushState() to change the URL without a reload,
window.onpopstate to react to the "Back"/"Forward" buttons.

Example of the "magic" in action

javascript

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About us</Link>
      </nav>

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

function Home() {
  return <h1>Home page</h1>;
}

function About() {
  return <h1>About us</h1>;
}

When you click "About us", the URL changes to /about, but React just renders <About />, and the browser does not make a request to the server.

Why this is convenient

Speed - instant transitions without a reload.
Preserving state (for example, filters, authentication).
Flexibility - you can control navigation from code (useNavigate).
Component composition - easy to build layouts, nested routes, and so on.

When the page still reloads

The page will reload if:

you use a plain <a href> instead of <Link>,
or you manually call window.location.href = '/about',
or the server is misconfigured (no SPA fallback, and it returns 404 for /about).

For this to work correctly, the server must always serve:

javascript

index.html

for any route (rather than looking for about.html, etc.).

Summary:

The page does not reload because React Router intercepts clicks and URL changes, changes the address through the History API, and renders the needed component right in the browser, without requesting new HTML from the server.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.