В чем разница в маршрутизации в React Router v5 и React Router v6?

Разница в маршрутизации между React Router v5 и v6

React Router v6 — это крупное обновление, которое внесло значительные изменения в API и подход к маршрутизации. Рассмотрим основные отличия.

1. Компонент Route и атрибут component

React Router v5:

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

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/user/:id" component={UserDetail} />
</Switch>

React Router v6:

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

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/user/:id" element={<UserDetail />} />
</Routes>

Основные изменения:

• Switch -> Routes
• component={Home} -> element={<Home />}
• Нет необходимости в exact, потому что v6 по умолчанию использует точное совпадение

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

React Router v5: Вложенные маршруты требовали явного определения пути:

<Route path="/user/:id" component={UserLayout}>
  <Route path="/user/:id/profile" component={Profile} />
  <Route path="/user/:id/settings" component={Settings} />
</Route>

React Router v6: Улучшенная система с более простым синтаксисом:

<Routes>
  <Route path="/user/:id" element={<UserLayout />}>
    <Route path="profile" element={<Profile />} />
    <Route path="settings" element={<Settings />} />
  </Route>
</Routes>

Вложенные маршруты наследуют путь родителя. В компоненте используйте <Outlet /> для отображения вложенного контента:

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

function UserLayout() {
  return (
    <div>
      <h1>User Profile</h1>
      <Outlet /> {/* Здесь отобразится Profile или Settings */}
    </div>
  );
}

3. Хук useHistory -> useNavigate

React Router v5:

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

function MyComponent() {
  const history = useHistory();
  
  const handleClick = () => {
    history.push('/about');
    // history.replace('/about');
    // history.go(-1);
  };
  
  return <button onClick={handleClick}>Go to About</button>;
}

React Router v6:

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

function MyComponent() {
  const navigate = useNavigate();
  
  const handleClick = () => {
    navigate('/about');
    // navigate('/about', { replace: true });
    // navigate(-1); // Назад
  };
  
  return <button onClick={handleClick}>Go to About</button>;
}

4. Параметры маршрута (useParams, useLocation, useRouteMatch)

React Router v5:

import { useParams, useHistory, useRouteMatch } from 'react-router-dom';

function UserDetail() {
  const { id } = useParams();
  const match = useRouteMatch();
  const location = useLocation();
  const history = useHistory();
  
  return <div>User {id}</div>;
}

React Router v6:

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

function UserDetail() {
  const { id } = useParams(); // Параметры маршрута
  const navigate = useNavigate();
  const location = useLocation(); // Текущее местоположение
  
  return <div>User {id}</div>;
}

useRouteMatch удален, информация о маршруте теперь получается через другие хуки.

5. Query параметры

React Router v5:

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

function SearchResults() {
  const location = useLocation();
  const queryParams = new URLSearchParams(location.search);
  const query = queryParams.get('q');
  
  return <div>Search: {query}</div>;
}

React Router v6: Рекомендуется использовать useSearchParams:

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

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q');
  
  return <div>Search: {query}</div>;
}

6. Redirect -> Navigate

React Router v5:

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

<Route path="/old-path" render={() => <Redirect to="/new-path" />} />

React Router v6:

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

<Route path="/old-path" element={<Navigate to="/new-path" replace />} />

7. Подстановочные маршруты (Wildcards)

React Router v5:

<Route path="*" component={NotFound} />

React Router v6:

<Route path="*" element={<NotFound />} />

Основные преимущества v6

• Проще код: меньше boilerplate, интуитивный API
• Лучше производительность: улучшенная система маршрутизации
• Вложенные маршруты: более естественный способ организации
• TypeScript поддержка: лучшая типизация
• Размер: меньший bundle size

Переход с v5 на v6 требует переписания маршрутизации, но результат — более чистый и понятный код.