Opgelost: gegevens doorgeven navigeren reageren router dom

Het grootste probleem met betrekking tot het doorgeven van gegevens bij het navigeren met React Router DOM is dat de gegevens moeten worden doorgegeven in de URL-querystring. Dit betekent dat alle gevoelige informatie moet worden gecodeerd voordat deze wordt doorgegeven, aangezien deze zichtbaar is in de URL. Bovendien, als de gegevens te groot zijn, kan deze de maximale lengte van een URL overschrijden en fouten veroorzaken. Ten slotte, als u React Router DOM gebruikt om tussen pagina's binnen een applicatie te navigeren, moet u ook handmatig de status beheren en wijzigingen bijhouden om ervoor te zorgen dat alle componenten toegang hebben tot dezelfde gegevens.

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>
  );
};

// Regel 1: Deze regel importeert de useHistory-hook uit de react-router-dom-bibliotheek.
// Regel 3: Deze regel declareert een constante genaamd MyComponent, een functie die JSX retourneert.
// Regel 4: Deze regel declareert een constant genaamde geschiedenis die is toegewezen aan de useHistory-hook die is geïmporteerd uit react-router-dom.
// Regel 6: Deze regel declareert een functie genaamd handleClick die één parameter, data, opneemt.
// Regel 7: Deze regel gebruikt het history-object om een ​​nieuwe route naar de stapel te pushen met de padnaam '/myroute' en statusgegevens die als een object zijn doorgegeven.
// Regels 9 – 11: Deze regels retourneren JSX met een knopelement met een onClick-gebeurtenishandler die handleClick aanroept en gegevens doorgeeft als een argument.

Reageren Router Dom

React Router DOM is een routeringsbibliotheek voor React waarmee ontwikkelaars routes binnen hun React-applicaties kunnen maken en beheren. Het biedt de kerncomponenten die nodig zijn om complexe webapplicaties met meerdere pagina's te bouwen met React, inclusief componenten zoals Link, Route, Switch en BrowserRouter. Het biedt ook functies zoals dynamische routematching en locatietracering. Met React Router DOM kunnen ontwikkelaars eenvoudig applicaties met één pagina maken met meerdere weergaven en routes zonder de URL of browsergeschiedenis handmatig te hoeven beheren.

Hoe geef je gegevens door via navigeren in react-router-Dom

In React Router kunnen gegevens via navigatie worden doorgegeven met behulp van het statusobject van de geschiedenis-API. Het toestandsobject is toegankelijk via de rekwisieten van elk onderdeel dat wordt weergegeven door a bestanddeel. Om gegevens door te geven, kunt u deze toevoegen aan het statusobject wanneer u de navigatiefunctie aanroept. Bijvoorbeeld:

const { geschiedenis } = dit.props;
geschiedenis.push({
padnaam: '/sommige/pad',
state: {someData: 'gegevens'}
});