Suggest an edit

Improve this article

Refine the answer for “What is routing in a React application?”. 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)

Routing is a system that "maps" an address (for example, `/profile` or `/dashboard/settings`) to the component that needs to be rendered on screen.

---

### An example without routing:

Without routing, moving to another page would require **reloading the whole page** from the server.
With routing in React, navigation happens **on the client side (client-side routing)**, quickly and without losing the application's state.

---

### How it works:

React itself doesn't include a built-in router, so the **React Router** library is most commonly used.

An example with `react-router-dom`:

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

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

export default App;
```

Here:

- `<BrowserRouter>` wraps the whole application and watches for URL changes.
- `<Routes>` is a container for the list of routes.
- `<Route path="/about" element={<About />}/>` says: if the URL is `/about`, show the `About` component.

---

### Advantages of client-side routing:

1. Faster: no full page reload.
2. The application's state is preserved.
3. It's easy to manage transitions and navigation inside an SPA (Single Page Application).
4. It's convenient to implement **dynamic routes**, for example `/users/:id`.

---

### Example of a dynamic route:

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

The `UserPage` component can get the `id` parameter from the URL:

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

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

---

### Types of routing:

| Type of routing | Description |
|---|---|
| **Client-side routing** | Managed in the browser, without a page reload. The main approach in React. |
| **Server-side routing** | Every request to a new URL triggers a reload and loads a new HTML page from the server. |
| **Static / pre-rendered routing (Next.js)** | Combines client-side and server-side rendering, enabling SEO and fast navigation. |

---

### Main hooks from `react-router-dom`:

- `useNavigate()`: navigate between pages programmatically.
- `useParams()`: get route parameters.
- `useLocation()`: get the current path and query parameters.
- `useSearchParams()`: manage query parameters (`?page=2`, etc.).

---

### Example of programmatic navigation:

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

function Login() {
  const navigate = useNavigate();

const handleLogin = () => {
    // authorization ...
    navigate("/dashboard");
  };

return <button onClick={handleLogin}>Log in</button>;
}
```

---

### Summary:

> **Routing in React means controlling which components are shown depending on the URL, without reloading the page.**
> It's implemented with libraries like `react-router-dom`, which makes React applications feel like full multi-page sites while keeping the convenience and speed of an SPA.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.