Reach Router

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

Router

Router является корневым компонентом маршрутизации. Он отслеживает текущее местоположение в приложении и обеспечивает контекст для всех компонентов Route и Link. В большинстве случаев используется BrowserRouter, который использует HTML5 History API:

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* маршруты */}
      </Routes>
    </BrowserRouter>
  );
}

Важно понимать, что Router должен быть верхним уровнем и оборачивать все компоненты, использующие маршруты.

Routes и Route

Routes — это контейнер для набора Route. Каждый Route описывает соответствие URL и компонента, который должен быть отрисован:

import { Routes, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

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

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

  • Атрибут path задаёт путь маршрута.
  • Атрибут element принимает JSX-компонент для отображения.
  • Путь может содержать динамические параметры, например: /user/:id.

Динамические маршруты

Параметры маршрута позволяют создавать универсальные маршруты для разных данных:

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

В компоненте UserProfile параметры можно получить с помощью хука useParams:

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

function UserProfile() {
  const { userId } = useParams();
  return <div>Профиль пользователя: {userId}</div>;
}

Link используется для перехода между страницами без перезагрузки:

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

<Link to="/about">О нас</Link>

NavLink расширяет функциональность Link и позволяет управлять активным состоянием:

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

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

Вложенные маршруты и Outlet

Вложенные маршруты позволяют строить иерархию страниц. Outlet служит плейсхолдером для дочерних маршрутов:

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="stats" element={<Stats />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

В компоненте Dashboard используется <Outlet /> для отображения дочерних компонентов:

function Dashboard() {
  return (
    <div>
      <h1>Панель управления</h1>
      <Outlet />
    </div>
  );
}

Программная навигация

Для перехода между страницами из кода используют хук useNavigate:

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

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

  const handleLogin = () => {
    // логика аутентификации
    navigate('/dashboard');
  };

  return <button onCl ick={handleLogin}>Войти</button>;
}

Метод navigate принимает путь, а также объект с опциями, например replace: true, чтобы заменить текущую запись в истории.

Защищённые маршруты

Для управления доступом создаются компоненты-обёртки:

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

<Routes>
  <Route path="/dashboard" element={
    <PrivateRoute>
      <Dashboard />
    </PrivateRoute>
  } />
</Routes>

<Navigate> позволяет автоматически перенаправлять пользователя на другой маршрут.

Работа с query-параметрами

Хук useSearchParams обеспечивает удобную работу с query-параметрами:

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

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category');

  const filterCategory = (newCategory) => {
    setSearchParams({ category: newCategory });
  };

  return <div>Товары категории: {category}</div>;
}

Этот подход позволяет синхронизировать состояние фильтров с URL.

Lazy loading маршрутов

React Router поддерживает ленивую загрузку компонентов через React.lazy и Suspense:

import { lazy, Suspense } from 'react';
const About = lazy(() => import('./About'));

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

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

Дополнительные возможности

  • useLocation — получение текущего URL и состояния навигации.
  • useMatch — проверка совпадения текущего маршрута с шаблоном.
  • useNavigationType — определение типа навигации (POP, PUSH, REPLACE).

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

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

Оглавление