Что такое React Router и зачем он нужен

React Router — это библиотека для управления маршрутизацией в приложениях на React. Она позволяет создавать динамическую навигацию между различными компонентами без перезагрузки страницы. Главная задача маршрутизатора — отображать определённые компоненты в зависимости от URL, сохраняя при этом состояние приложения и обеспечивая плавный пользовательский опыт.

Маршрутизация в React Router строится вокруг трёх ключевых концепций: Routes, Route и Link.

  • Routes — контейнер, который объединяет несколько маршрутов и определяет, какой из них будет активен в текущий момент.
  • Route — определяет соответствие между URL и компонентом. Каждому маршруту задаётся путь path и компонент element, который должен отобразиться.
  • Link — компонент для создания навигации. Он заменяет стандартные HTML-теги <a> и обеспечивает переход без перезагрузки страницы.
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Главная</Link>
        <Link to="/about">О нас</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

Типы маршрутов

React Router поддерживает несколько типов маршрутов, каждый из которых имеет свои особенности:

  1. Статические маршруты Соответствие происходит по фиксированному пути. Например, /about или /contact.

  2. Динамические маршруты Используются параметры в пути с двоеточием :. Параметры можно получить через хук useParams.

<Route path="/user/:id" element={<UserProfile />} />

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

function UserProfile() {
  const { id } = useParams();
  return <div>Профиль пользователя {id}</div>;
}
  1. Маршруты с вложенными компонентами Позволяют строить иерархию маршрутов, где один маршрут может включать несколько вложенных.
<Route path="/dashboard" element={<Dashboard />}>
  <Route path="stats" element={<Stats />} />
  <Route path="settings" element={<Settings />} />
</Route>

Вложенные маршруты отображаются с использованием компонента <Outlet />.

Навигация и управление переходами

Link и NavLink позволяют создавать ссылки. Основное отличие NavLink — возможность автоматического добавления CSS-класса для активного маршрута.

<NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
  О нас
</NavLink>

Для программной навигации используется хук useNavigate:

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

function HomeButton() {
  const navigate = useNavigate();
  return <button onCl ick={() => navigate('/home')}>На главную</button>;
}

Защита маршрутов и редиректы

React Router позволяет реализовать приватные маршруты, доступные только авторизованным пользователям. Основная техника — создание обёртки PrivateRoute:

function PrivateRoute({ children, isAuthenticated }) {
  return isAuthenticated ? children : <Navigate to="/login" />;
}

// Использование
<Route path="/profile" element={<PrivateRoute isAuthenticated={userLoggedIn}><Profile /></PrivateRoute>} />

Для простого перенаправления используется компонент Navigate.

Работа с состоянием маршрутов

React Router поддерживает передачу состояния между маршрутами через объект state в Link и useNavigate.

<Link to="/details" state={{ from: 'homepage' }}>Подробнее</Link>

import { useLocation } from 'react-router-dom';

function Details() {
  const location = useLocation();
  return <div>Перешли со страницы: {location.state.from}</div>;
}

Это позволяет передавать данные без использования глобального состояния или query-параметров.

Важные хуки React Router

  • useParams — получение параметров из URL.
  • useNavigate — программная навигация.
  • useLocation — получение текущего URL и состояния.
  • useMatch — проверка, совпадает ли текущий URL с заданным маршрутом.
  • useOutletContext — передача данных между родительским и вложенными маршрутами.

Логические паттерны маршрутизации

  • “Switching” маршрутов — новый React Router использует <Routes> вместо устаревшего <Switch>. <Routes> ищет первое совпадение и рендерит только его.
  • Catch-all маршрут — для обработки неизвестных путей:
<Route path="*" element={<NotFound />} />
  • Index routes — маршрут по умолчанию для родителя:
<Route path="/dashboard" element={<Dashboard />}>
  <Route index element={<DashboardHome />} />
</Route>

Lazy-loading компонентов с React Router

Для оптимизации приложения маршруты могут загружать компоненты динамически через React.lazy и Suspense:

import { Suspense, lazy } from 'react';

const About = lazy(() => import('./About'));

<Routes>
  <Route path="/about" element={
    <Suspense fallback={<div>Загрузка...</div>}>
      <About />
    </Suspense>
  } />
</Routes>

Это позволяет уменьшить размер основного бандла и ускорить загрузку приложения.

React Router предоставляет мощный инструмент для организации навигации, позволяя строить как простые, так и сложные многоуровневые SPA, управлять доступом, передавать состояние и оптимизировать загрузку компонентов. Правильное использование его концепций — ключ к созданию гибких и масштабируемых React-приложений.

Оглавление