Вирішено: передати дані навігації реагувати маршрутизатор 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 Dom

React Router DOM — це бібліотека маршрутизації для React, яка дозволяє розробникам створювати та керувати маршрутами в своїх програмах React. Він надає основні компоненти, необхідні для створення складних багатосторінкових веб-додатків за допомогою React, включаючи такі компоненти, як Link, Route, Switch і BrowserRouter. Він також надає такі функції, як динамічне зіставлення маршруту та відстеження місцезнаходження. За допомогою React Router DOM розробники можуть легко створювати односторінкові програми з декількома переглядами та маршрутами без необхідності вручну керувати URL-адресою чи історією браузера.

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

У React Router дані можна передавати через навігацію за допомогою об’єкта стану API історії. Об’єкт стану доступний через властивості будь-якого компонента, відтвореного a компонент. Щоб передати дані, ви можете додати їх до об’єкта стану під час виклику функції навігації. Наприклад:

const { історія } = this.props;
history.push({
шлях: '/деякий/шлях',
стан: { someData: 'дані' }
});