Løst: pass data naviger react router dom

Hovedproblemet i forbindelse med videregivelse af data ved navigation med React Router DOM er, at dataene skal sendes i URL-forespørgselsstrengen. Det betyder, at enhver følsom information skal kodes, før den videregives, da den vil være synlig i URL'en. Derudover, hvis dataene er for store, kan de overskride den maksimale længde af en URL og forårsage fejl. Endelig, hvis du bruger React Router DOM til at navigere mellem sider i en applikation, skal du også manuelt administrere tilstand og holde styr på ændringer for at sikre, at alle komponenter har adgang til de samme data.

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

// Linje 1: Denne linje importerer useHistory-krogen fra react-router-dom-biblioteket.
// Linje 3: Denne linje erklærer en konstant kaldet MyComponent, som er en funktion, der returnerer JSX.
// Linje 4: Denne linie erklærer en konstant kaldet historie, som er tildelt useHistory-hook importeret fra react-router-dom.
// Linje 6: Denne linje erklærer en funktion kaldet handleClick, som tager én parameter ind, data.
// Linje 7: Denne linje bruger historieobjektet til at skubbe en ny rute ind på stakken med stinavn '/myroute' og angive data, der er sendt som et objekt.
// Linje 9 – 11: Disse linjer returnerer JSX, der indeholder et knapelement med en onClick-hændelseshandler, der kalder handleClick og sender data som et argument.

React Router Dom

React Router DOM er et routing-bibliotek til React, der giver udviklere mulighed for at oprette og administrere ruter i deres React-applikationer. Det giver de kernekomponenter, der er nødvendige for at bygge komplekse, flersidede webapplikationer med React, herunder komponenter som Link, Route, Switch og BrowserRouter. Det giver også funktioner såsom dynamisk rutematching og lokationssporing. Med React Router DOM kan udviklere nemt oprette enkeltsideapplikationer med flere visninger og ruter uden at skulle administrere URL'en eller browserhistorikken manuelt.

Hvordan sender du data gennem navigering i react-router-Dom

I React Router kan data sendes gennem navigation ved hjælp af tilstandsobjektet for historie API. Tilstandsobjektet er tilgængeligt gennem rekvisitterne til enhver komponent gengivet af en komponent. For at videregive data kan du tilføje dem til tilstandsobjektet, når du kalder navigeringsfunktionen. For eksempel:

const { historie } = denne.rekvisitter;
history.push({
stinavn: '/noget/sti',
tilstand: { someData: 'data' }
});