Зачем нужен React Router DOM?

React Router DOM: Назначение и применение

React Router DOM — это библиотека маршрутизации для React-приложений, которая позволяет создавать Single Page Applications (SPA) с навигацией между страницами без полной перезагрузки браузера. Это критически важный инструмент для построения современных веб-приложений.

Основные назначения

1. Управление навигацией

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

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
        <Route path="/profile/:id" element={<ProfilePage />} />
      </Routes>
    </BrowserRouter>
  );
}

2. Динамические параметры маршрутов

Маршруты могут содержать динамические сегменты (параметры), которые извлекаются из URL. Это позволяет создавать гибкие интерфейсы:

import { useParams } from react-router-dom;

function ProfilePage() {
  const { id } = useParams();
  
  return <h1>Профиль пользователя: {id}</h1>;
}
// URL: /profile/123 -> id = "123"

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

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "questions",
        element: <QuestionsPage />,
        children: [
          { path: ":id", element: <QuestionDetail /> }
        ]
      },
      { path: "profile", element: <ProfilePage /> }
    ]
  }
]);

4. Query параметры и состояние

React Router позволяет работать с query-строками (параметры поиска) для фильтрации и пагинации:

import { useSearchParams } from react-router-dom;

function QuestionsList() {
  const [searchParams, setSearchParams] = useSearchParams();
  const page = searchParams.get("page") || 1;
  
  return (
    <div>
      <QuestionItem />
      <button onClick={() => setSearchParams({ page: Number(page) + 1 })}>
        Следующая страница
      </button>
    </div>
  );
}

5. Защищённые маршруты (Protected Routes)

Легко реализовать аутентификацию — показывать маршруты только авторизованным пользователям:

function ProtectedRoute({ children }) {
  const { user } = useContext(AuthContext);
  
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  return children;
}

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

6. История браузера и навигация

React Router автоматически управляет историей браузера, что позволяет кнопкам "Назад" и "Вперёд" работать корректно:

import { useNavigate } from react-router-dom;

function Component() {
  const navigate = useNavigate();
  
  const handleBack = () => navigate(-1);      // Шаг назад
  const handleHome = () => navigate("/");     // На главную
  
  return <button onClick={handleBack}>Назад</button>;
}

Преимущества использования

• Быстрая навигация: нет перезагрузки страницы, только обновление компонентов
• Чистые URL: состояние приложения отражается в адресной строке
• Bookmarking: пользователи могут сохранять закладки на конкретные страницы
• Deep linking: прямые ссылки на любую часть приложения
• SEO friendly: когда используется Server-Side Rendering (SSR)
• Управление историей: поддержка кнопок браузера "Назад/Вперёд"

Когда использовать

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

Выводы: React Router DOM — это стандартная библиотека для маршрутизации в React, которая обеспечивает удобный, декларативный способ навигации, управление параметрами маршрутов и защиту страниц от несанкционированного доступа.