Suggest an edit

Improve this article

Refine the answer for “Why doesn't the page reload during routing?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. **calls** `preventDefault()` - cancels the browser's default behavior (the page reload);
2. **changes the URL** through `history.pushState()` (part of the HTML5 History API);
3. **notifies React Router** that the path changed;
4. **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

1. **Speed** - instant transitions without a reload.
2. **Preserving state** (for example, filters, authentication).
3. **Flexibility** - you can control navigation from code (`useNavigate`).
4. **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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts560 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.