Передача state при навигации

React Router предоставляет мощный механизм для организации навигации в приложениях на React. Одним из ключевых аспектов является возможность передачи состояния (state) между страницами или компонентами при переходе. Это позволяет избегать глобального состояния для временных данных и обеспечивает удобный способ передачи информации между маршрутами.

Компонент <Link> позволяет задать не только путь, но и объект state, который будет доступен на целевом маршруте. Пример базового использования:

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

function Home() {
  const user = { id: 1, name: 'Alice' };

  return (
    <div>
      <h1>Главная страница</h1>
      <Link 
        to="/profile" 
        state={{ user }}
      >
        Перейти к профилю
      </Link>
    </div>
  );
}

Здесь объект user передается в маршрут /profile. Этот объект не отображается в URL, что удобно для передачи чувствительных данных или временной информации.

Получение переданного state в целевом компоненте

Для извлечения переданного состояния используется хук useLocation из react-router-dom:

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

function Profile() {
  const location = useLocation();
  const { user } = location.state || {};

  return (
    <div>
      <h1>Профиль пользователя</h1>
      {user ? (
        <p>Имя: {user.name}</p>
      ) : (
        <p>Данные пользователя отсутствуют</p>
      )}
    </div>
  );
}

Важно проверять наличие state, так как при прямом переходе по URL объект может отсутствовать.

Передача state через хук useNavigate

Для программной навигации и передачи состояния используется хук useNavigate:

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

function Dashboard() {
  const navigate = useNavigate();

  const goToProfile = () => {
    navigate('/profile', { state: { user: { id: 2, name: 'Bob' } } });
  };

  return <button onCl ick={goToProfile}>Профиль</button>;
}

Второй аргумент функции navigate — объект опций, среди которых ключ state позволяет передавать любые данные. Это особенно полезно при редиректах после действий пользователя, например, после формы или авторизации.

Сохранение state при обновлении страницы

Данные, переданные через state, не сохраняются при перезагрузке страницы, так как они хранятся в истории браузера, а не в URL или локальном хранилище. Если требуется сохранение между обновлениями страницы, необходимо использовать localStorage, sessionStorage или глобальное состояние через Redux/Context API.

Типичные сценарии использования

  1. Передача данных после формы После успешного заполнения формы можно передать результат в другой компонент без необходимости сохранять данные глобально.

  2. Временные фильтры и настройки Для фильтров таблиц или настроек интерфейса можно передавать состояние между страницами без загромождения URL.

  3. Контекстное перенаправление Например, после авторизации передать информацию о только что вошедшем пользователе на страницу профиля.

Особенности и рекомендации

  • Не использовать для больших данных: state хранится в памяти истории, передача больших объектов может повлиять на производительность.
  • Обрабатывать отсутствие state: при прямом переходе через URL переданный state может отсутствовать.
  • Совместимость с TypeScript: при использовании TypeScript можно типизировать location.state для безопасного доступа к переданным данным.

Пример типизации:

interface LocationState {
  user: { id: number; name: string };
}

const location = useLocation() as { state: LocationState };
const { user } = location.state;
  • Совместимость с nested routes: state корректно передается и при вложенных маршрутах, если навигация осуществляется через Link или navigate.

Передача состояния через state в React Router — это легкий и удобный способ обмена данными между маршрутами без необходимости глобального состояния или сериализации данных в URL. Этот механизм хорошо подходит для временной информации, действий пользователя и контекстных переходов, обеспечивая чистую и гибкую архитектуру приложения.

Оглавление