Rozwiązany: przekazywanie danych nawigacja reaguj na router dom

Głównym problemem związanym z przekazywaniem danych podczas nawigacji z React Router DOM jest to, że dane muszą być przekazywane w ciągu zapytania URL. Oznacza to, że wszelkie poufne informacje muszą zostać zakodowane przed przekazaniem, ponieważ będą widoczne w adresie URL. Dodatkowo, jeśli dane są zbyt duże, mogą przekraczać maksymalną długość adresu URL i powodować błędy. Wreszcie, jeśli używasz React Router DOM do nawigacji między stronami w aplikacji, musisz także ręcznie zarządzać stanem i śledzić zmiany, aby zapewnić wszystkim komponentom dostęp do tych samych danych.

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

// Linia 1: ta linia importuje hak useHistory z biblioteki react-router-dom.
// Linia 3: Ta linia deklaruje stałą o nazwie MyComponent, która jest funkcją zwracającą JSX.
// Linia 4: Ta linia deklaruje stałą o nazwie history, która jest przypisana do haka useHistory zaimportowanego z React-router-dom.
// Linia 6: Ta linia deklaruje funkcję o nazwie handleClick, która przyjmuje jeden parametr, data.
// Linia 7: Ta linia używa obiektu historii do wysłania nowej trasy na stos z nazwą ścieżki „/myroute” i danymi stanu przekazanymi jako obiekt.
// Linie 9 – 11: Te linie zwracają kod JSX zawierający element przycisku z procedurą obsługi zdarzenia onClick, która wywołuje handleClick i przekazuje dane jako argument.

Dom routera React

React Router DOM to biblioteka routingu dla React, która umożliwia programistom tworzenie tras i zarządzanie nimi w ich aplikacjach React. Zapewnia podstawowe komponenty niezbędne do budowania złożonych, wielostronicowych aplikacji internetowych za pomocą React, w tym komponenty takie jak Link, Route, Switch i BrowserRouter. Zapewnia również funkcje, takie jak dynamiczne dopasowywanie tras i śledzenie lokalizacji. Dzięki React Router DOM programiści mogą łatwo tworzyć aplikacje jednostronicowe z wieloma widokami i trasami bez konieczności ręcznego zarządzania adresem URL lub historią przeglądarki.

Jak przekazujesz dane przez nawigację w reakcji-router-Dom

W React Router dane mogą być przekazywane przez nawigację za pomocą obiektu stanu API historii. Obiekt stanu jest dostępny przez rekwizyty dowolnego komponentu renderowanego przez a składnik. Aby przekazać dane, możesz dodać je do obiektu stanu podczas wywoływania funkcji nawigacji. Na przykład:

const { historia } = this.props;
historia.push({
nazwa ścieżki: '/niektóre/ścieżka',
stan: {niektóreDane: 'dane'}
});