Расширение функциональности роутера

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

Динамическая маршрутизация

Динамическая маршрутизация позволяет создавать маршруты на основе данных, получаемых в реальном времени, например, из API. Для этого используется компонент <Route> с параметрами пути:

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

function App() {
  return (
    <Routes>
      <Route path="/products/:id" element={<ProductPage />} />
    </Routes>
  );
}

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

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

function ProductPage() {
  const { id } = useParams();
  // Запрос к API на основе id
}

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

Защита маршрутов (Protected Routes)

Для приложений с авторизацией часто требуется ограничивать доступ к определённым страницам. Для этого создаются защищённые маршруты через компонент-обёртку:

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

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

Использование:

<Routes>
  <Route
    path="/dashboard"
    element={
      <ProtectedRoute isAuthenticated={userLoggedIn}>
        <Dashboard />
      </ProtectedRoute>
    }
  />
</Routes>

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

Ложные маршруты (Nested Routes)

Nested Routes позволяют структурировать интерфейс и маршруты иерархически. Это особенно полезно для больших приложений с вложенной навигацией:

import { Routes, Route, Outlet } from 'react-router-dom';

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function Analytics() {
  return <div>Analytics Section</div>;
}

function Reports() {
  return <div>Reports Section</div>;
}

<Routes>
  <Route path="/dashboard" element={<Dashboard />}>
    <Route path="analytics" element={<Analytics />} />
    <Route path="reports" element={<Reports />} />
  </Route>
</Routes>

Компонент <Outlet> отвечает за рендер вложенных маршрутов внутри родительского компонента.

Ленивая загрузка компонентов (Code Splitting)

Для оптимизации производительности React Router поддерживает ленивую загрузку компонентов с помощью React.lazy и <Suspense>:

import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';

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

function App() {
  return (
    <Suspense fallback={<div>Загрузка...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  );
}

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

Управление навигацией и состоянием

React Router предоставляет хуки для программной навигации и контроля истории:

  • useNavigate — позволяет программно переходить на другой маршрут:
import { useNavigate } from 'react-router-dom';

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

  const handleLogin = () => {
    // Логика авторизации
    navigate('/dashboard', { replace: true });
  };

  return <button onCl ick={handleLogin}>Войти</button>;
}
  • useLocation — предоставляет текущий путь, состояние навигации и поисковые параметры:
import { useLocation } from 'react-router-dom';

function ShowQuery() {
  const location = useLocation();
  console.log(location.search); // ?filter=active
  return null;
}
  • useNavigationType и useHref — позволяют уточнять тип навигации (push, replace) и строить ссылки программно.

Расширение функциональности через кастомные хук-компоненты

React Router легко интегрируется с собственными хук-компонентами для логики навигации, авторизации или анализа маршрутов:

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

function useAuthRedirect() {
  const navigate = useNavigate();
  const location = useLocation();

  const redirectToLoginIfNeeded = (isAuthenticated) => {
    if (!isAuthenticated) {
      navigate('/login', { state: { from: location }, replace: true });
    }
  };

  return { redirectToLoginIfNeeded };
}

Это позволяет централизовать логику контроля доступа и переиспользовать её в разных компонентах.

Итоговые возможности расширения

  • Динамическая маршрутизация через параметры и коллекции.
  • Защищённые маршруты с перенаправлением и контроль доступа.
  • Вложенные маршруты с <Outlet> для сложных интерфейсов.
  • Ленивая загрузка компонентов для уменьшения бандла.
  • Программная навигация и контроль состояния с использованием хуков.
  • Кастомные хуки и обёртки для централизованного управления навигацией.

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

Оглавление