Головна / Статті / Основи React Router: BrowserRouter, маршрути, пояснення Route та Link

ReactReact RouterJavaScriptFrontendWeb Development

Основи React Router: BrowserRouter, маршрути, пояснення Route та Link

Дізнайтеся, що роблять BrowserRouter, Routes, Route та Link у React Router, як вони поєднуються в одному додатку, та як відповідати на класичні запитання під час співбесіди щодо них.

930 слів

Більшості додатків на React незабаром потрібно кілька екранів, таких як Головна, Про нас, Товари та Контакти. Сам React не має уявлення про URL, тому відповідальність за прив’язку адрес до екранів лежить на бібліотеці, зазвичай React Router. Чотири її компоненти охоплюють більшість типових сценаріїв маршрутизації: <BrowserRouter>, <Routes>, <Route> та <Link>. Як тільки ви зрозумієте, що робить кожен з них та як вони взаємодіють, ви зможете створити багатосторінковий додаток у форматі однієї сторінки та пояснити це під час співбесіди.

BrowserRouter під’єднує React до URL

<BrowserRouter> — це сам маршрутизатор. Він забезпечує клієнтську маршрутизацію за допомогою API історії браузера, підтримуючи синхронність відображуваного інтерфейсу з адресною строкою без необхідності запитувати сервер про новий документ.

Використовуйте його тоді, коли ваш додаток має відображати окремі URL для своїх екранів, залишаючись при цьому однією сторінкою, наприклад:

/
/about
/products
/contact

Налаштування полягає у обгортці дерева компонентів; все, що потребує маршрутизації, повинно знаходитися всередині неї:

import { BrowserRouter } from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      {/* Application routes */}
    </BrowserRouter>
  );
}

Зазвичай його розміщують один раз, у корені. Одна з практичних наслідків: оскільки такі шляхи, як /about, є справжніми URL, ваш хост має подавати той самий index.html для всіх них, інакше оновлення сторінки за адресою /about призведе до помилки 404 від сервера.

Routes вибирає, що відображати

<Routes> — це контейнер для визначень маршрутів. При кожній зміні адреси він порівнює поточний URL із своїми дочірніми елементами та відображає відповідний. Використовуйте його тоді, коли React Router, а не власноруч написані умовні оператори, має вирішувати, який екран буде відображатися:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/products" element={<Products />} />
</Routes>

Тут елемент <Routes> обробляє всі три шляхи. Він вибирає найкращу відповідність замість першої, що вказана, тому вам рідко доводиться турбуватися про порядок.

Мапування шляху на елемент

Кожен елемент <Route> поєднує URL-шлях із компонентом, який має бути відображений, подібно до запису у таблиці пошуку:

/about → About component
/products → Products component

Додайте один елемент для кожного URL, який має відображати щось конкретне. Ключовими атрибутами є path та element:

<Route
  path="/about"
  element={<About />}
/>

За такою конфігурацією відвідування цього адреси:

/about

змушує React Router відобразити:

<About />

Зауважте, що атрибут element приймає вже відображений елемент (<About />), а не посилання на компонент, тому ви можете безпосередньо передавати його атрибути. Кілька маршрутів виглядають так:

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/contact" element={<Contact />} />
</Routes>

Якщо жоден шлях не збігається, нічого у цьому блоку не відображається; загальний маршрут path="*" є звичайним способом показати екран „не знайдено“.

Переходи за посиланням без перезавантаження

<Link> переміщує користувача між маршрутами, залишаючи додаток завантаженим. Він створює звичайний елемент <a> у DOM, але перехоплює клік та дозволяє React Router керувати навігацією. Використовуйте його для внутрішньої навігації, наприклад у панелі навігації:

import { Link } from "react-router-dom";
function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/contact">Contact</Link>
    </nav>
  );
}

Клік по кнопці Про нас оновлює URL, <Routes> переоцінюється, і екран „Про нас“ з’являється без перезавантаження браузера, тож спільний формат та стан у пам’яті залишаються незмінними. Для зовнішніх сайтів все одно підходить звичайний елемент <a>.

Об’єднання всього разом

Мінімальна повна конфігурація (з розділами Home, About та Contact, визначеними в іншому місці):

import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";
function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
        <Link to="/contact">Contact</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

Посилання та блок <Routes> є сестринськими елементами всередині <BrowserRouter>: навігація залишається видимою на кожній сторінці, тоді як лише регіон <Routes> змінює вміст. Коротко кажучи, ієрархія така:

BrowserRouter
      ↓
    Routes
      ↓
    Route
      ↓
  Component

<Link> розташовується поруч із цією ланцюгом як елемент керування, на який клікають користувачі для зміни URL. У прикладах використовується імпорт з react-router-dom; останні версії також надають ці API з пакету react-router, тож перевірте документацію до вашої версії.

Запитання під час співбесіди

  • Що таке <BrowserRouter>? Це маршрутизатор, який дозволяє роботу з маршрутами на стороні клієнта та підтримує синхронізацію інтерфейсу з URL браузера.
  • У чому різниця між <Routes> та <Route>? <Routes> — це контейнер, який відповідає URL; кожен <Route> визначає один шлях та елемент, який потрібно відобразити.
  • У чому різниця між <Link> та <a>? <Link> здійснює навігацію на клієнтській стороні без повного перезавантаження; звичайний <a> змушує браузер знову завантажити URL.
  • Чому краще використовувати <Link> у додатку React Router? Це дозволяє зберегти додаток у форматі односторінкового додатку та уникнути непотрібних повних перезавантажень сторінки.
  • Чи може <Route> працювати без <BrowserRouter>? Зазвичай ні: компоненти маршрутизації повинні відображатися всередині контексту роутера, такого як <BrowserRouter>.

    • Основні висновки

    • <BrowserRouter> дозволяє налаштувати маршрутизацію один раз у кореневій частині.
    • <Routes> керує маршрутами та відображає відповідний контент.
    • <Route> пов’язує URL із компонентом.
    • <Link> дозволяє переміщатися між маршрутами без перезавантаження.

    Вкладені маршрути, динамічні сегменти, захищені маршрути та хуки навігації всі базуються на цій самій моделі. Щоб дізнатися, як React вирішує, що переробити під час зміни маршруту, дивіться створення ментальної моделі для процесу узгодження, стану та хуків у React.

    Пов’язана література

    Усі статтіНадіслати бриф