Основна проблема, пов’язана з передачею даних під час навігації за допомогою 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: 'дані' }
});