Решено: передать данные, перейти к реагирующему маршрутизатору dom.

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

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

const MyComponent = () => {
  const history = useHistory();

  const handleClick = (data) => {
    history.push({ pathname: '/myroute', state: data }); // pass data to route as state object
  };

  return (
    <button onClick={() => handleClick(data)}>Go to MyRoute</button>
  );
};

// Строка 1: Эта строка импортирует хук useHistory из библиотеки react-router-dom.
// Строка 3: В этой строке объявляется константа MyComponent, которая является функцией, возвращающей JSX.
// Строка 4: В этой строке объявляется константа с именем history, которая назначается хуку useHistory, импортированному из react-router-dom.
// Строка 6: В этой строке объявляется функция с именем handleClick, которая принимает один параметр — данные.
// Строка 7: Эта строка использует объект истории для помещения в стек нового маршрута с путем '/myroute' и данными состояния, переданными как объект.
// Строки 9–11: эти строки возвращают JSX, содержащий элемент кнопки с обработчиком события onClick, который вызывает handleClick и передает данные в качестве аргумента.

React Router Дом

React Router DOM — это библиотека маршрутизации для React, которая позволяет разработчикам создавать маршруты и управлять ими в своих приложениях React. Он предоставляет основные компоненты, необходимые для создания сложных многостраничных веб-приложений с помощью React, включая такие компоненты, как Link, Route, Switch и BrowserRouter. Он также предоставляет такие функции, как динамическое сопоставление маршрутов и отслеживание местоположения. С помощью React Router DOM разработчики могут легко создавать одностраничные приложения с несколькими представлениями и маршрутами без необходимости вручную управлять URL-адресом или историей браузера.

Как вы передаете данные через навигацию в react-router-Dom

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

const {история} = this.props;
история.push({
путь: '/некоторые/путь',
состояние: {someData: 'данные'}
});