Что такое React Router и как реализовать маршрутизацию?

Что такое React Router

React Router — стандартная библиотека маршрутизации для React. Она позволяет строить Single Page Application (SPA), где переходы между «страницами» происходят на стороне клиента: URL меняется, нужный компонент рендерится, но полная перезагрузка браузера не происходит.

Актуальная версия — React Router v6, которая существенно отличается от v5 синтаксисом и концепциями.

Основные концепции

BrowserRouter

Корневой провайдер, который подключает History API браузера. Оборачивает всё приложение:

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

function App() {
  return (
    <BrowserRouter>
      <Layout />
    </BrowserRouter>
  );
}

Routes и Route

Компонент Routes выбирает первый подходящий маршрут из набора Route. В v6 больше нет Switch — его заменил Routes:

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

function AppRoutes() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/courses" element={<CoursesPage />} />
      <Route path="/courses/:id" element={<CourseDetailPage />} />
      <Route path="*" element={<NotFoundPage />} />
    </Routes>
  );
}

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

v6 поддерживает вложенность через дочерние Route и компонент Outlet:

function AppRoutes() {
  return (
    <Routes>
      <Route path="/dashboard" element={<DashboardLayout />}>
        {/* Outlet в DashboardLayout рендерит эти дочерние маршруты */}
        <Route index element={<DashboardHome />} />
        <Route path="profile" element={<ProfilePage />} />
        <Route path="settings" element={<SettingsPage />} />
      </Route>
    </Routes>
  );
}

function DashboardLayout() {
  return (
    <div>
      <Sidebar />
      <Outlet /> {/* сюда вставляется активный дочерний маршрут */}
    </div>
  );
}

Навигация

Для ссылок используется Link (без перезагрузки) или NavLink (с поддержкой активного состояния):

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

function Nav() {
  return (
    <nav>
      <NavLink
        to="/courses"
        className={({ isActive }) => isActive ? 'active' : ''}
      >
        Курсы
      </NavLink>
    </nav>
  );
}

Программная навигация и хуки

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

function CourseDetailPage() {
  const { id } = useParams<{ id: string }>();       // параметры пути
  const [searchParams] = useSearchParams();          // query-параметры
  const navigate = useNavigate();                    // программный переход

  const handleBack = () => navigate(-1);             // назад в истории
  const handleHome = () => navigate('/', { replace: true }); // без записи в историю

  return <div>Курс {id}</div>;
}

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

Паттерн для авторизованных зон:

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

// Использование
<Route
  path="/dashboard"
  element={
    <PrivateRoute>
      <DashboardLayout />
    </PrivateRoute>
  }
/>

Ключевые отличия v6 от v5

• Switch → Routes
• component={Page} → element={<Page />}
• useHistory → useNavigate
• Вложенные маршруты декларируются внутри родительского Route, а не в дочернем компоненте
• Относительные пути работают автоматически в дочерних Route