Що таке роутинг (routing) у React-застосунку?

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

Роутинг - це система, яка "зіставляє" адресу (наприклад, /profile або /dashboard/settings) з компонентом, який потрібно відрендерити на екрані.

Приклад без роутингу:

Якби роутингу не було, при переході на іншу сторінку довелося б перезавантажувати всю сторінку з сервера. З роутингом у React перехід відбувається на стороні клієнта (client-side routing) - швидко і без втрати стану застосунку.

Як це працює:

React сам по собі не містить вбудованого роутера, тому найчастіше використовується бібліотека React Router.

Приклад з 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;

Тут:

<BrowserRouter> - обгортає весь застосунок і стежить за змінами URL.
<Routes> - контейнер для списку маршрутів.
<Route path="/about" element={<About />}/> - вказує: якщо URL /about, потрібно показати компонент About.

Переваги клієнтського роутингу:

Швидше - немає повного перезавантаження сторінки.
Зберігається стан застосунку.
Можна легко керувати переходами і навігацією всередині SPA (Single Page Application).
Зручно реалізовувати динамічні маршрути, наприклад /users/:id.

Приклад динамічного маршруту:

javascript

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

Компонент UserPage зможе отримати параметр id з URL:

javascript

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

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

Види роутингу:

Тип роутингу	Опис
Client-side routing	Керується в браузері, без перезавантаження сторінки. Основний варіант у React.
Server-side routing	Кожен запит до нового URL викликає перезавантаження і завантаження нової HTML-сторінки з сервера.
Static / pre-rendered routing (Next.js)	Поєднує клієнтський і серверний рендеринг, дозволяючи SEO і швидку навігацію.

Основні хуки з `react-router-dom`:

useNavigate() - перехід між сторінками програмно.
useParams() - отримати параметри маршруту.
useLocation() - отримати поточний шлях і query-параметри.
useSearchParams() - керувати параметрами запиту (?page=2 тощо).

Приклад програмної навігації:

javascript

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

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

  const handleLogin = () => {
    // авторизація ...
    navigate("/dashboard");
  };

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

Підсумок:

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

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

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

Premium

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