11. React Router

React Router: Навигация в SPA

Иллюстрация к уроку React Router – это библиотека, позволяющая реализовать навигацию между разными страницами в Single Page Application (SPA) на React. Вместо перезагрузки страницы целиком, React Router обновляет только необходимые компоненты, что делает приложение быстрее и отзывчивее.

Концепция React Router

Основная идея React Router – это сопоставление URL-адресов с определенными компонентами. Когда пользователь переходит по ссылке, React Router отображает соответствующий компонент. Для этого используются специальные компоненты, предоставляемые библиотекой.

Основные компоненты:

BrowserRouter: Оборачивает все приложение и использует HTML5 History API для управления историей браузера. (рекомендуется для большинства случаев)
Routes: Определяет набор маршрутов.
Route: Сопоставляет определенный URL-адрес с компонентом.
Link: Создает навигационные ссылки, которые не перезагружают страницу.

Практический пример

Давайте создадим простое приложение с двумя страницами: “Главная” и “О нас”.

import React from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function Home() {
  return (
    <div>
      <h1>Главная страница</h1>
      <p>Добро пожаловать!</p>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>О нас</h1>
      <p>Информация о компании.</p>
    </div>
  );
}

function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Главная</Link>
            </li>
            <li>
              <Link to="/about">О нас</Link>
            </li>
          </ul>
        </nav>

        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

Пояснения:

Мы импортируем необходимые компоненты из react-router-dom.
BrowserRouter оборачивает все приложение.
Компонент Link создает ссылки для перехода между страницами. Атрибут to указывает URL-адрес, на который нужно перейти.
Компонент Routes содержит определение маршрутов.
Каждый компонент Route сопоставляет URL-адрес (атрибут path) с компонентом (атрибут element). Например, <Route path="/" element={<Home />} /> означает, что при переходе на URL / будет отображен компонент Home.

Жизненный пример

React Router используется практически во всех современных SPA приложениях.

E-commerce сайты: Навигация между категориями товаров, страницами товаров, корзиной и т.д.
Социальные сети: Переходы между профилями пользователей, лентой новостей, страницами групп и т.д.
Информационные порталы: Навигация между статьями, разделами, страницами категорий.
Фреймворки: Next.js и Remix используют React Router (или его аналоги) для реализации навигации и маршрутизации.

Ключевые моменты

React Router позволяет создавать SPA с плавной навигацией.
BrowserRouter – основной компонент для большинства проектов.
Routes и Route используются для определения маршрутов.
Link создает навигационные ссылки без перезагрузки страницы.
React Router значительно улучшает пользовательский опыт в SPA.