Löst: passera data navigera reagera router dom

Det största problemet med att skicka data när man navigerar med React Router DOM är att data måste skickas i URL-frågesträngen. Detta innebär att all känslig information måste kodas innan den skickas, eftersom den kommer att synas i URL:en. Dessutom, om data är för stor, kan den överskrida den maximala längden på en URL och orsaka fel. Slutligen, om du använder React Router DOM för att navigera mellan sidor i en applikation, måste du också manuellt hantera tillstånd och hålla reda på ändringar för att säkerställa att alla komponenter har tillgång till samma 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>
  );
};

// Rad 1: Denna rad importerar useHistory-kroken från react-router-dom-biblioteket.
// Rad 3: Denna rad deklarerar en konstant som kallas MyComponent som är en funktion som returnerar JSX.
// Rad 4: Den här raden deklarerar en konstant kallad historik som är tilldelad useHistory-kroken som importeras från react-router-dom.
// Rad 6: Denna rad deklarerar en funktion som heter handleClick som tar in en parameter, data.
// Rad 7: Den här raden använder historikobjektet för att skicka en ny rutt till stacken med sökvägen '/myroute' och tillståndsdata som skickas som ett objekt.
// Raderna 9 – 11: Dessa rader returnerar JSX som innehåller ett knappelement med en onClick-händelsehanterare som anropar handleClick och skickar in data som ett argument.

Reager Router Dom

React Router DOM är ett routingbibliotek för React som låter utvecklare skapa och hantera rutter inom sina React-applikationer. Den tillhandahåller de kärnkomponenter som krävs för att bygga komplexa, flersidiga webbapplikationer med React, inklusive komponenter som Link, Route, Switch och BrowserRouter. Den tillhandahåller också funktioner som dynamisk ruttmatchning och platsspårning. Med React Router DOM kan utvecklare enkelt skapa ensidiga applikationer med flera vyer och rutter utan att behöva hantera webbadressen eller webbläsarhistoriken manuellt.

Hur skickar du data genom navigering i react-router-Dom

I React Router kan data skickas genom navigering med hjälp av tillståndsobjektet för historia API. Tillståndsobjektet är tillgängligt genom rekvisita av vilken komponent som helst som återges av en komponent. För att skicka data kan du lägga till det i tillståndsobjektet när du anropar navigeringsfunktionen. Till exempel:

const { historia } = this.props;
history.push({
sökväg: '/någon/sökväg',
state: { someData: 'data' }
});