Det största problemet med att skicka data i react router-historik, push är att data inte kvarstår över siduppdateringar. När en användare uppdaterar sidan kommer data som lagras i history.push att gå förlorade och kommer inte att vara tillgängliga för användning vid efterföljande sidladdningar. Detta kan leda till oväntat beteende och kan orsaka problem när du försöker komma åt eller lagra data från en tidigare sidladdning.
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. Den här raden importerar useHistory-kroken från react-router-dom-biblioteket, som ger åtkomst till historikobjektet som håller reda på den aktuella platsen i appen.
2. Den här raden deklarerar en funktionell komponent som kallas MyComponent och tilldelar den till en konstant variabel.
3. Den här raden använder useHistory-kroken som importeras i rad 1 för att få tillgång till historikobjektet och tilldela det till en konstant variabel som kallas historik.
4. Den här raden deklarerar en funktion som heter handleClick som tar ett argument som kallas data och skickar ett objekt som innehåller sökvägs- och tillståndsegenskaper till historikstacken med history.push().
5. Den här raden returnerar ett knappelement med en onClick-händelsehanterare som anropar handleClick() med ett objekt som innehåller someData som argument när det klickas av en användare.
Historik push
History push in React Router är en metod som används för att programmatiskt ändra webbadressen i webbläsaren utan att orsaka en siduppdatering. Det tillåter utvecklare att skapa ensidiga applikationer som fortfarande kan hantera navigering och djuplänkar. History push fungerar genom att använda webbläsarens historia API, vilket gör att utvecklare kan manipulera den aktuella URL:en utan att ladda om sidan. Detta gör det möjligt för användare att navigera mellan olika sidor i en applikation utan att behöva ladda om varje gång. Dessutom kan den användas för djuplänkar, vilket gör att användare kan länka direkt till specifika delar av en applikation.
Hur använder jag historik i react router
React Router ger ett sätt att använda historik i dina React-applikationer. Historik låter dig hålla reda på den aktuella sidan, såväl som alla tidigare sidor som har besökts. Detta är användbart för att skapa navigering och hålla reda på användaråtgärder.
För att använda historik i React Router måste du skapa ett historikobjekt med metoden createHistory() från historikpaketet. Detta ger dig tillgång till metoder som push(), replace() och go(). Dessa metoder låter dig manipulera webbläsarens URL och navigera mellan olika rutter i din applikation. Du kan också använda metoden listen() för att lyssna efter ändringar i URL:en och uppdatera din applikation därefter.
När du har skapat ett historikobjekt kan du skicka det till din routerkomponent när du skapar det. Detta gör att React Router kan hålla reda på alla ändringar som görs av användare och uppdatera därefter.
Att använda historik med React Router gör det lättare för utvecklare att skapa kraftfulla navigeringskomponenter som är lätta för användare att förstå och interagera med.
