Решено: прехвърляне на данни, навигация, реакция, рутер dom

Основният проблем, свързан с предаването на данни при навигиране с DOM на React Router, е, че данните трябва да бъдат предадени в 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: 'данни' }
});