При создании веб-приложений с помощью React часто встречаются сценарии, в которых нам необходимо передавать данные о состоянии с одной страницы на другую. Один из эффективных способов добиться этого — использовать компонент ссылки и путь React Router. В этой статье мы рассмотрим различные методы отправки объектов состояния на следующую страницу, предоставляя попутно разговорные объяснения и примеры кода.

Метод 1. Параметры запроса

Один простой подход — закодировать объект состояния в качестве параметров запроса в URL-адресе. Объект состояния можно сериализовать в строку с помощью таких методов, как JSON.stringify(), а затем добавить к URL-адресу с помощью компонента ссылки React Router. На принимающей странице состояние можно извлечь из параметров URL-запроса и десериализовать обратно в объект.

Пример:

// Sending page
import { Link } from 'react-router-dom';
const stateObject = { name: 'John', age: 25 };
const queryString = encodeURIComponent(JSON.stringify(stateObject));
//...
<Link to={`/next-page?state=${queryString}`}>Go to Next Page</Link>

// Receiving page
import { useLocation } from 'react-router-dom';
//...
const { search } = useLocation();
const params = new URLSearchParams(search);
const stateString = params.get('state');
const stateObject = JSON.parse(decodeURIComponent(stateString));

Метод 2: параметры URL

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

Пример:

// Sending page
import { Link } from 'react-router-dom';
const stateObject = { name: 'John', age: 25 };
//...
<Link to={`/next-page/${encodeURIComponent(JSON.stringify(stateObject))}`}>Go to Next Page</Link>

// Receiving page
import { useParams } from 'react-router-dom';
//...
const { state } = useParams();
const stateObject = JSON.parse(decodeURIComponent(state));

Метод 3: библиотеки управления состоянием

Если ваше приложение использует библиотеку управления состоянием, например Redux или MobX, вы можете использовать их возможности для передачи состояния между страницами. Эти библиотеки предоставляют глобальный контейнер состояний, доступ к которому можно получить из любого компонента приложения. Обновив глобальное состояние нужными данными на отправляющей странице и получив доступ к ним на принимающей странице, вы можете эффективно передавать объекты состояния.

Пример (с использованием Redux):

// Sending page
import { useDispatch } from 'react-redux';
import { setAppState } from 'redux/actions';
const stateObject = { name: 'John', age: 25 };
const dispatch = useDispatch();
dispatch(setAppState(stateObject));
//...
<Link to="/next-page">Go to Next Page</Link>

// Receiving page
import { useSelector } from 'react-redux';
//...
const stateObject = useSelector(state => state.appState);

В этой статье мы рассмотрели различные методы передачи объектов состояния между страницами в приложении React с использованием компонента ссылки React Router и имени пути. Мы обсудили использование параметров запроса, параметров URL-адресов и библиотек управления состоянием, таких как Redux. У каждого метода есть свои преимущества и варианты использования, поэтому выберите тот, который лучше всего соответствует требованиям вашего проекта.

Реализуя эти методы, вы можете улучшить взаимодействие с пользователем и обеспечить плавную навигацию между страницами, сохраняя и передавая важные данные.