Що робить бібліотека react-router-dom?

ReactJunior~1 хв читання

Що робить бібліотека `react-router`

react-router - це бібліотека, яка дозволяє реалізувати навігацію (роутинг) всередині SPA (Single Page Application) на React.

Вона відповідає за те, щоб:

стежити за зміною URL в адресному рядку;
зіставляти URL з потрібним компонентом;
оновлювати інтерфейс без перезавантаження сторінки;
надавати інструменти для навігації, параметрів, вкладених маршрутів тощо.

Простіше кажучи:

react-router робить так, щоб залежно від URL (наприклад, /, /about, /profile/42) React показував потрібний компонент на сторінці - без перезавантаження.

Основні компоненти і концепції `react-router`

1. `<BrowserRouter>`

Обгортає весь застосунок і "слухає" зміни адреси в браузері. Використовує HTML5 History API (pushState, replaceState) для керування URL.

javascript

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

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

2. `<Routes>` і `<Route>`

Описують структуру маршрутів (що відображати за якого шляху).

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>
  );
}

При переході на /about React покаже компонент <About />.

3. Навігація (`<Link>` і `useNavigate`)

Через компонент `<Link>`:

javascript

<Link to="/about">Про нас</Link>

→ Змінює URL і оновлює компонент без перезавантаження сторінки.

Програмно через `useNavigate()`:

javascript

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

4. Параметри маршруту (`useParams`)

Дозволяють створювати динамічні маршрути, наприклад /users/:id.

javascript

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

javascript

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

function User() {
  const { id } = useParams();
  return <h2>Профіль користувача №{id}</h2>;
}

5. Query-параметри (`useSearchParams`)

Робота з параметрами в URL, наприклад ?page=2.

javascript

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

6. Вкладені маршрути (Nested routes)

Дозволяють створювати маршрути зі спільною оболонкою (layout):

javascript

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

7. Route guards і Redirect

Можна перенаправляти користувача, якщо він не авторизований:

javascript

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

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

Основні можливості `react-router`

Можливість	Опис
SPA-навігація	Перемикання сторінок без перезавантаження
Вкладені маршрути	Підтримка layouts і підсторінок
Динамічні параметри	`/users/:id`, `/posts/:slug`
Навігація з коду	`useNavigate()`
Query-параметри	`useSearchParams()`
Обробка 404	`<Route path="*">`
Захищені маршрути	Редиректи на основі стану (авторизація)

Різновиди пакета

Пакет	Де використовується
`react-router-dom`	У веб-застосунках (браузер)
`react-router-native`	У React Native
`react-router`	Базовий пакет, спільний для всіх платформ

Зазвичай ти встановлюєш:

javascript

npm install react-router-dom

У двох словах:

react-router - це маршрутизатор для React, який дозволяє керувати URL і відображенням компонентів, створюючи повноцінне багатосторінкове SPA зі швидкою навігацією і гнучкою структурою маршрутів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.