Løst: pass data naviger reager router dom

Hovedproblemet knyttet til å sende data når du navigerer med React Router DOM er at dataene må sendes i URL-spørringsstrengen. Dette betyr at all sensitiv informasjon må kodes før den sendes, da den vil være synlig i URL-en. I tillegg, hvis dataene er for store, kan de overskride den maksimale lengden på en URL og forårsake feil. Til slutt, hvis du bruker React Router DOM for å navigere mellom sider i en applikasjon, må du også manuelt administrere tilstand og holde styr på endringer for å sikre at alle komponenter har tilgang til de samme dataene.

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 linjen importerer useHistory-kroken fra react-router-dom-biblioteket.
// Linje 3: Denne linjen erklærer en konstant kalt MyComponent som er en funksjon som returnerer JSX.
// Linje 4: Denne linjen erklærer en konstant kalt historie som er tilordnet useHistory-kroken importert fra react-router-dom.
// Linje 6: Denne linjen erklærer en funksjon kalt handleClick som tar inn én parameter, data.
// Linje 7: Denne linjen bruker historieobjektet til å skyve en ny rute inn på stabelen med banenavnet '/myroute' og angi data som er sendt som et objekt.
// Linje 9 – 11: Disse linjene returnerer JSX som inneholder et knappeelement med en onClick hendelsesbehandler som kaller handleClick og sender inn data som et argument.

React Router Dom

React Router DOM er et rutebibliotek for React som lar utviklere lage og administrere ruter i sine React-applikasjoner. Den gir kjernekomponentene som er nødvendige for å bygge komplekse, flersidede webapplikasjoner med React, inkludert komponenter som Link, Route, Switch og BrowserRouter. Den gir også funksjoner som dynamisk rutetilpasning og stedssporing. Med React Router DOM kan utviklere enkelt lage enkeltsideapplikasjoner med flere visninger og ruter uten å måtte administrere URL-en eller nettleserloggen manuelt.

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

I React Router kan data sendes gjennom navigasjon ved å bruke tilstandsobjektet til historie-API. Tilstandsobjektet er tilgjengelig gjennom rekvisittene til enhver komponent gjengitt av en komponent. For å sende data kan du legge dem til tilstandsobjektet når du kaller opp navigeringsfunksjonen. For eksempel:

const { historie } = this.props;
history.push({
banenavn: '/noen/bane',
state: { someData: 'data' }
});