Het grootste probleem met betrekking tot het doorgeven van gegevens in de geschiedenis van de reactierouter, push, is dat de gegevens niet worden bewaard bij het vernieuwen van pagina's. Wanneer een gebruiker de pagina vernieuwt, gaan de gegevens die zijn opgeslagen in history.push verloren en zijn ze niet beschikbaar voor gebruik bij het laden van volgende pagina's. Dit kan leiden tot onverwacht gedrag en kan problemen veroorzaken bij het openen of opslaan van gegevens van een vorige pagina die is geladen.
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. Deze regel importeert de useHistory-hook uit de react-router-dom-bibliotheek, die toegang geeft tot het geschiedenisobject dat de huidige locatie in de app bijhoudt.
2. Deze regel declareert een functionele component genaamd MyComponent en wijst deze toe aan een constante variabele.
3. Deze regel gebruikt de in regel 1 geรฏmporteerde useHistory-hook om toegang te krijgen tot het geschiedenisobject en dit toe te wijzen aan een constante variabele genaamd geschiedenis.
4. Deze regel declareert een functie met de naam handleClick die een argument met de naam data gebruikt en een object met eigenschappen padnaam en status naar de geschiedenisstapel pusht met behulp van history.push().
5. Deze regel retourneert een knopelement met een onClick-gebeurtenishandler die handleClick() aanroept met een object dat someData als argument bevat wanneer erop wordt geklikt door een gebruiker.
Geschiedenis druk
History push in React Router is een methode die wordt gebruikt om de URL in de browser programmatisch te wijzigen zonder een paginavernieuwing te veroorzaken. Het stelt ontwikkelaars in staat om applicaties van รฉรฉn pagina te maken die nog steeds in staat zijn om met navigatie en deeplinking om te gaan. Geschiedenispush werkt door de geschiedenis-API van de browser te gebruiken, waarmee ontwikkelaars de huidige URL kunnen manipuleren zonder de pagina opnieuw te laden. Dit maakt het voor gebruikers mogelijk om tussen verschillende pagina's van een applicatie te navigeren zonder telkens opnieuw te hoeven laden. Bovendien kan het worden gebruikt voor deeplinking, waardoor gebruikers rechtstreeks naar specifieke delen van een applicatie kunnen linken.
Hoe gebruik ik geschiedenis in reactierouter
React Router biedt een manier om geschiedenis te gebruiken in uw React-applicaties. Met de geschiedenis kunt u de huidige pagina bijhouden, evenals eerdere pagina's die zijn bezocht. Dit is handig voor het maken van navigatie en het bijhouden van gebruikersacties.
Om geschiedenis in React Router te gebruiken, moet u een geschiedenisobject maken met behulp van de methode createHistory() uit het geschiedenispakket. Dit geeft je toegang tot methoden zoals push(), replace() en go(). Met deze methoden kunt u de URL van de browser manipuleren en navigeren tussen verschillende routes in uw toepassing. U kunt ook de methode listen() gebruiken om te luisteren naar wijzigingen in de URL en uw toepassing dienovereenkomstig bij te werken.
Nadat u een geschiedenisobject hebt gemaakt, kunt u dit tijdens het maken doorgeven aan uw routercomponent. Hierdoor kan React Router alle door gebruikers aangebrachte wijzigingen bijhouden en dienovereenkomstig bijwerken.
Het gebruik van geschiedenis met React Router maakt het voor ontwikkelaars gemakkelijker om krachtige navigatiecomponenten te maken die voor gebruikers gemakkelijk te begrijpen en te gebruiken zijn.
