Suggest an edit

Improve this article

Refine the answer for “What does the react-router-dom library do?”. 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)

## What the `react-router` library does

`react-router` is a library that lets you implement **navigation (routing)** inside a **SPA (Single Page Application)** built with React.

It is responsible for:

1. watching for changes to the URL in the address bar;
2. matching the URL to the right **component**;
3. updating the interface **without reloading the page**;
4. providing tools for navigation, parameters, nested routes, and so on.

---

## In simpler terms:

> `react-router` makes it so that, depending on the URL (for example, `/`, `/about`, `/profile/42`),
> React shows the right component on the page - **without a reload**.

---

## The main components and concepts of `react-router`

### 1. `<BrowserRouter>`

Wraps the whole application and "listens" for changes to the address in the browser.
It uses the **HTML5 History API** (`pushState`, `replaceState`) to manage the URL.

```javascript
import { BrowserRouter } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <MyRoutes />
    </BrowserRouter>
  );
}
```

---

### 2. `<Routes>` **and** `<Route>`

Describe the structure of routes (what to display for which path).

```javascript
import { Routes, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";

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

When you go to `/about`, React will show the `<About />` component.

---

### 3. **Navigation (**`<Link>` **and** `useNavigate`**)**

#### Via the `<Link>` component:

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

→ Changes the URL and updates the component **without reloading the page**.

#### Programmatically via `useNavigate()`:

```javascript
const navigate = useNavigate();
navigate("/profile");
```

---

### 4. **Route parameters (**`useParams`**)**

Let you create **dynamic routes**, for example `/users/:id`.

```javascript
<Route path="/users/:id" element={<User />} />
```

```javascript
import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();
  return <h2>User profile #{id}</h2>;
}
```

---

### 5. **Query parameters (**`useSearchParams`**)**

Working with parameters in the URL, for example `?page=2`.

```javascript
const [searchParams, setSearchParams] = useSearchParams();
const page = searchParams.get("page");
```

---

### 6. **Nested routes**

Let you build routes that share a common wrapper (layout):

```javascript
<Route path="/dashboard" element={<DashboardLayout />}>
  <Route path="analytics" element={<Analytics />} />
  <Route path="settings" element={<Settings />} />
</Route>
```

---

### 7. **Route guards and Redirect**

You can redirect a user who is not authenticated:

```javascript
import { Navigate } from "react-router-dom";

<Route
  path="/profile"
  element={isAuth ? <Profile /> : <Navigate to="/login" />}
/>
```

---

## The main features of `react-router`

| Feature | Description |
|---|---|
| SPA navigation | Switching pages without a reload |
| Nested routes | Support for layouts and subpages |
| Dynamic parameters | `/users/:id`, `/posts/:slug` |
| Navigation from code | `useNavigate()` |
| Query parameters | `useSearchParams()` |
| Handling 404 | `<Route path="*">` |
| Protected routes | Redirects based on state (authentication) |

---

## Package variants

| Package | Where it is used |
|---|---|
| `react-router-dom` | In web applications (browser) |
| `react-router-native` | In React Native |
| `react-router` | The base package, shared across all platforms |

You usually install:

```javascript
npm install react-router-dom
```

---

## In a nutshell:

> `react-router` is a router for React
> that lets you manage the URL and which components are displayed,
> creating a full **multi-page SPA** with fast navigation and a flexible route structure.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.