Компонент Navigate для редиректов

Компонент Navigate из библиотеки React Router предназначен для программного перенаправления пользователя с одного маршрута на другой. Его использование позволяет управлять навигацией без необходимости взаимодействия с DOM напрямую, обеспечивая реактивный подход к маршрутизации.

Основной синтаксис

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

<Navigate to="/new-path" replace={true} />
  • to — обязательное свойство, указывающее путь, на который необходимо перенаправить пользователя. Может быть строкой или объектом с дополнительными параметрами.
  • replace — логическое значение, определяющее, будет ли новая запись в истории браузера заменять текущую (true) или добавляться поверх (false по умолчанию).

Примеры использования

Простой редирект

function LoginRedirect({ isLoggedIn }) {
  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }
  return <Dashboard />;
}

В данном примере при условии !isLoggedIn происходит автоматический редирект на страницу логина.

Редирект с заменой истории

function Logout() {
  return <Navigate to="/home" replace={true} />;
}

Использование replace={true} предотвращает возможность возврата на страницу выхода с помощью кнопки “Назад” в браузере.

Редирект с объектом состояния

Свойство to может принимать объект с полями pathname, search и state:

<Navigate
  to={{
    pathname: "/profile",
    search: "?tab=activity",
    state: { fromDashboard: true }
  }}
/>
  • pathname — путь для перенаправления.
  • search — строка запроса, аналогичная query-параметрам в URL.
  • state — объект состояния, который можно использовать для передачи данных между страницами без добавления их в URL.

Редирект после выполнения условий или асинхронных операций

Компонент Navigate удобно применять в сочетании с условными операторами:

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

Также можно использовать внутри эффекта useEffect для программной навигации:

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

function AutoRedirect({ shouldRedirect }) {
  const navigate = useNavigate();

  useEffect(() => {
    if (shouldRedirect) {
      navigate("/target-page", { replace: true });
    }
  }, [shouldRedirect, navigate]);

  return <div>Ожидание перенаправления...</div>;
}

В этом случае useNavigate позволяет выполнять редирект из логики компонентов без непосредственного рендера Navigate.

Отличие Navigate от <Redirect> (старые версии React Router)

В React Router версии 6 компонент <Redirect> был полностью заменён на <Navigate>. Основные отличия:

  • <Navigate> является декларативным и используется внутри JSX.
  • Свойство replace заменяет функциональность push и replace из старого API.
  • Объект state позволяет передавать данные при редиректе, чего в <Redirect> было сложнее достичь.

Особенности работы с историей браузера

  • По умолчанию replace={false} добавляет новый элемент в историю, что позволяет пользователю вернуться на предыдущую страницу.
  • replace={true} заменяет текущую запись, предотвращая возврат.
  • Комбинация Navigate с state и query-параметрами позволяет сохранять контекст перехода между страницами.

Редирект на основе динамических маршрутов

function UserRedirect({ userId }) {
  return <Navigate to={`/users/${userId}`} replace />;
}

Динамические сегменты URL интегрируются напрямую с параметрами маршрута, что делает компонент Navigate удобным для переходов к пользовательским страницам, деталям продукта или другим ресурсам с переменными путями.

Использование в маршрутизаторе

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

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/login" element={<Login />} />
  <Route path="/dashboard" element={<ProtectedRoute />} />
  <Route path="*" element={<Navigate to="/" replace />} />
</Routes>
  • Маршрут с path="*" используется для обработки всех неизвестных путей и перенаправления на главную страницу или страницу ошибки 404.

Практические рекомендации

  • Для авторизации и защищённых маршрутов использовать <Navigate> с условием проверки состояния пользователя.
  • Для переходов после форм или действий применять replace={true}, чтобы не засорять историю браузера.
  • Для передачи данных между страницами использовать объект state вместо query-параметров, если данные не нужны в URL.
  • Для динамических URL удобно интегрировать параметры маршрута напрямую в свойство to.

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

Оглавление