Основният проблем, свързан с предаването на данни в хронологията на реагиращия рутер, push е, че данните не се запазват при опресняване на страницата. Когато потребител опресни страницата, данните, съхранени в history.push, ще бъдат загубени и няма да бъдат достъпни за използване при следващи зареждания на страницата. Това може да доведе до неочаквано поведение и може да причини проблеми при опит за достъп или съхраняване на данни от предишно зареждане на страница.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Този ред импортира куката useHistory от библиотеката react-router-dom, която осигурява достъп до историческия обект, който следи текущото местоположение в приложението.
2. Този ред декларира функционален компонент, наречен MyComponent, и го присвоява на постоянна променлива.
3. Този ред използва куката useHistory, импортирана в ред 1, за да получи достъп до историческия обект и да го присвои на постоянна променлива, наречена history.
4. Този ред декларира функция, наречена handleClick, която приема аргумент, наречен data, и избутва обект, съдържащ име на пътя и свойства на състоянието, в стека на хронологията, използвайки history.push().
5. Този ред връща елемент на бутон с манипулатор на събитие onClick, който извиква handleClick() с обект, съдържащ someData като свой аргумент, когато щракне от потребител.
Натискане на историята
Натискането на история в React Router е метод, използван за програмна промяна на URL адреса в браузъра, без да причинява опресняване на страницата. Той позволява на разработчиците да създават приложения с една страница, които все още могат да обработват навигация и дълбоки връзки. History push работи, като използва API за история на браузъра, което позволява на разработчиците да манипулират текущия URL адрес, без да презареждат страницата. Това дава възможност на потребителите да навигират между различни страници на приложение, без да се налага да презареждат всеки път. Освен това може да се използва за дълбоко свързване, което позволява на потребителите да се свързват директно към определени части на приложение.
Как да използвам история в реагиращия рутер
React Router предоставя начин за използване на историята във вашите React приложения. Историята ви позволява да следите текущата страница, както и всички предишни страници, които сте били посетени. Това е полезно за създаване на навигация и проследяване на действията на потребителите.
За да използвате история в React Router, трябва да създадете обект на история, като използвате метода createHistory() от пакета история. Това ще ви даде достъп до методи като push(), replace() и go(). Тези методи ви позволяват да манипулирате URL адреса на браузъра и да навигирате между различни маршрути във вашето приложение. Можете също така да използвате метода listen(), за да слушате за промени в URL адреса и съответно да актуализирате приложението си.
След като създадете исторически обект, можете да го предадете в компонента на рутера, когато го създавате. Това ще позволи на React Router да следи всички промени, направени от потребителите, и да актуализира съответно.
Използването на история с React Router улеснява разработчиците да създават мощни навигационни компоненти, които са лесни за разбиране и взаимодействие от потребителите.
