React Router v5 против v6: Полное руководство (2023)

React Router DOM v5 по-прежнему функционален в 2023 году, однако рекомендуется обновиться до v6+ для получения лучшей производительности, упрощенного API и долгосрочной поддержки. Ключевое отличие заключается в том, что v6+ больше не поддерживает кастомные компоненты маршрутов, как это было в v5, вместо этого требуя строгого следования новой структуре компонентов Routes и Route. Для новых проектов или существующих приложений со значительной логикой кастомных маршрутов v6+ предлагает более современные подходы к маршрутизации, в то время как v5 остается жизнеспособным для проектов, требующих только поддержки, через совместимый пакет.

Содержание

• Могу ли я по-прежнему использовать React Router v5 в 2023 году?
• Ключевые различия между v5 и v6+
• Кастомные компоненты маршрутов: v5 против v6+
• Стратегии миграции
• Какую версию следует выбрать?

Могу ли я по-прежнему использовать React Router v5 в 2023 году?

Да, вы можете по-прежнему использовать React Router DOM v5 в 2023 году, но это больше не активно поддерживаемая версия. Официальная документация React Router подтверждает, что v5 все еще поддерживается через пакет обратной совместимости под названием react-router-dom-v5-compat. Этот пакет позволяет запускать как v5, так и v6 параллельно в процессе миграции.

Основные причины для продолжения использования v5 включают:

• Приложения, требующие только поддержки: Если вашему проекту не требуются новые функции, а нужны только исправления ошибок
• Сложная логика кастомных маршрутов: Если ваше приложение сильно полагается на более гибкий подход v5 к кастомным компонентам маршрутов
• Постепенная стратегия миграции: Использование совместимого пакета для поэтапного обновления

Однако v5 больше не получает активной разработки, что означает, что вы не получите новые функции, обновления безопасности или улучшения производительности, которые доступны в v6+.

Ключевые различия между v5 и v6+

Изменения в структуре компонентов

Наиболее значительным изменением является замена Switch на Routes:

Синтаксис v5:

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

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route path="/users" component={Users} />
  </Switch>
</BrowserRouter>

Синтаксис v6+:

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

<BrowserRouter>
  <Routes>
    <Route path="/" element={<HomePage />} />
    <Route path="/users" element={<Users />} />
  </Routes>
</BrowserRouter>

Изменения в API

Несколько компонентов и API либо были удалены, либо значительно изменены:

• Switch → Routes
• проп component → проп element
• useRouteMatch → useMatch
• Prompt и usePrompt были удалены
• доступ к объекту history был упрощен

Согласно официальному руководству по обновлению React Router, эти изменения были внесены для более тесного следования соглашениям React и улучшения согласованности API.

Кастомные компоненты маршрутов: v5 против v6+

Кастомные компоненты маршрутов в v5

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

• Стражей аутентификации
• Оберток макетов
• Загрузки данных, специфичных для маршрута
• Трекинга аналитики

Пример кастомного компонента маршрута в v5:

const ProtectedRoute = ({ component: Component, ...rest }) => {
  const { isAuthenticated } = useAuth();
  
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

// Использование
<ProtectedRoute exact path="/dashboard" component={Dashboard} />

Ограничения на кастомные компоненты маршрутов в v6+

В v6+ кастомные компоненты маршрутов больше не поддерживаются. Как указано в обсуждении на Stack Overflow, “в react-router-dom@6 кастомные компоненты маршрутов больше недействительны. Компонент Routes может отображать только компоненты Route.”

Это означает, что вам нужно рефакторить вашу логику кастомных маршрутов с использованием других подходов:

Подход v6+ с использованием хуков:

const ProtectedRoute = ({ element: Element, ...rest }) => {
  const { isAuthenticated } = useAuth();
  
  return (
    <Route
      {...rest}
      element={isAuthenticated ? <Element /> : <Navigate to="/login" />}
    />
  );
};

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

Альтернативный подход v6+ с использованием конфигурации маршрутов:

const routes = [
  {
    path: "/dashboard",
    element: isAuthenticated ? <Dashboard /> : <Navigate to="/login" />,
  }
];

<Routes>
  {routes.map((route, index) => (
    <Route key={index} {...route} />
  ))}
</Routes>

В документации React Router v6 объясняется, что это изменение было внесено для устранения различия между “компонентами маршрутов” и “компонентами отображения маршрутов”, наблюдавшегося в v5, что привело к более чистому и предсказуемому API.

Стратегии миграции

1. Использование пакета обратной совместимости

Рекомендуемый подход — использовать react-router-dom-v5-compat, который позволяет выполнять поэтапную миграцию. Согласно официальной документации, “пакет обратной совместимости позволяет веб-приложениям React Router постепенно мигрировать на последний API в v6, запуская его параллельно с v5.”

Шаги для миграции с использованием совместимого пакета:

1. Установите обе версии: npm install react-router-dom@^5.3.0 react-router-dom@^6.0.0
2. Импортируйте из react-router-dom-v5-compat для компонентов, которые вы мигрируете
3. Постепенно заменяйте импорты v5 на импорты v6
4. Как только все компоненты будут использовать API v6, удалите совместимый пакет

2. Полный подход к миграции

Для полной миграции следуйте этим шагам:

Этап 1: Изменения инфраструктуры

• Замените <Switch> на <Routes>
• Измените пропы component на пропы element
• Обновите использование пропа exact (в v6 не требуется exact для корневых маршрутов)

Этап 2: Рефакторинг логики

• Преобразуйте кастомные компоненты маршрутов для использования хуков
• Замените useRouteMatch на useMatch
• Обновите шаблоны навигации (используйте Navigate вместо Redirect)

Этап 3: Тестирование

• Убедитесь, что все маршруты работают правильно
• Протестируйте вложенную маршрутизацию и компоненты макетов
• Проверьте стражей аутентификации и защиту маршрутов

Руководство по миграции от LogRocket предоставляет comprehensive примеры для каждого из этих этапов.

Какую версию следует выбрать?

Выбирайте React Router v5, если:

• Вы поддерживаете существующее приложение v5 без немедленной необходимости в новых функциях
• Ваш проект сильно полагается на кастомные компоненты маршрутов, которые будет трудно рефакторить
• Вам нужно больше времени для планирования миграции и вы хотите использовать совместимый пакет
• Ваша команда более знакома с шаблонами v5, и кривая обучения для v6 будет значительной

Выбирайте React Router v6+, если:

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

Компромисс: Постепенная миграция

Многие команды находят успех с гибридным подходом:

1. Сразу начните использовать совместимый пакет
2. Мигрируйте по одному маршруту за раз с шаблонов v5 на v6
3. Сохраняйте основную инфраструктуру v5, обновляя отдельные компоненты
4. В конечном итоге полностью перейдите на v6, когда все компоненты будут обновлены

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

Заключение

• React Router v5 все еще можно использовать в 2023 году через пакет обратной совместимости, но он больше не активно поддерживается
• v6+ предлагает значительные улучшения в производительности, согласованности API и современных шаблонах React, но удаляет поддержку кастомных компонентов маршрутов
• Кастомные компоненты маршрутов в v5 обеспечивали гибкость, но создавали сложность; v6+ решает это с помощью хуков и упрощенных шаблонов
• Для новых проектов v6+ явно лучший выбор
• Для существующих приложений v5 учитывайте сложность вашего проекта и экспертизу команды при принятии решения о миграции
• Совместимый пакет обеспечивает безопасный путь для постепенной миграции с v5 на v6+

В конечном итоге, решение зависит от конкретных потребностей вашего проекта, но большинству команд следует планировать миграцию на v6+ в течение следующих 12-18 месяцев, чтобы воспользоваться непрерывной разработкой и поддержкой.

Источники

1. Официальное руководство React Router по обновлению с v5
2. Stack Overflow: Обновление с react router v5 на v6
3. Руководство по миграции React Router с v5 на v6
4. GeeksforGeeks: React Router V5 против V6
5. Stack Overflow: React-Router-Dom V6 против V5
6. Сообщество DEV: Различие между React Router DOM v5 и v6
7. Обсуждение GitHub: Официальное руководство по миграции с v5 на v6
8. Medium: Постепенная миграция с React Router DOM v5 на v6
9. LogRocket: Полное руководство по миграции на React Router v6
10. Apiumhub: Почему следует рассмотреть возможность использования React Router v6