Ratkaistu: pass data navigate react router dom

Suurin ongelma, joka liittyy tietojen välittämiseen React Router DOM:lla navigoitaessa, on se, että tiedot on välitettävä URL-kyselymerkkijonossa. Tämä tarkoittaa, että kaikki arkaluontoiset tiedot on koodattava ennen niiden välittämistä, koska ne näkyvät URL-osoitteessa. Lisäksi, jos tiedot ovat liian suuria, ne voivat ylittää URL-osoitteen enimmäispituuden ja aiheuttaa virheitä. Lopuksi, jos käytät React Router DOM:ia navigointiin sovelluksen sivujen välillä, sinun on myös manuaalisesti hallittava tilaa ja seurattava muutoksia varmistaaksesi, että kaikilla komponenteilla on pääsy samoihin tietoihin.

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

// Rivi 1: Tämä rivi tuo useHistory-hookin react-router-dom-kirjastosta.
// Rivi 3: Tämä rivi ilmoittaa vakion nimeltä MyComponent, joka on funktio, joka palauttaa JSX:n.
// Rivi 4: Tämä rivi ilmoittaa vakion nimeltä historia, joka on määritetty react-router-domista tuodulle useHistory-hookille.
// Rivi 6: Tämä rivi ilmoittaa handelClick-nimisen funktion, joka ottaa yhden parametrin, datan.
// Rivi 7: Tämä rivi käyttää historiaobjektia uuden reitin työntämiseen pinoon polunnimellä '/myroute' ja objektina välitetyillä tilatiedoilla.
// Rivit 9–11: Nämä rivit palauttavat JSX:n, joka sisältää painikeelementin ja onClick-tapahtumakäsittelijän, joka kutsuu handleClickiä ja välittää tietoja argumenttina.

React Router Dom

React Router DOM on Reactin reitityskirjasto, jonka avulla kehittäjät voivat luoda ja hallita reittejä React-sovelluksissaan. Se tarjoaa ydinkomponentit, joita tarvitaan monimutkaisten, monisivuisten verkkosovellusten rakentamiseen Reactin avulla, mukaan lukien komponentit, kuten Link, Route, Switch ja BrowserRouter. Se tarjoaa myös ominaisuuksia, kuten dynaamisen reittisovituksen ja sijainnin seurannan. React Router DOM:n avulla kehittäjät voivat helposti luoda yhden sivun sovelluksia, joissa on useita näkymiä ja reittejä ilman, että heidän tarvitsee hallita URL-osoitetta tai selainhistoriaa manuaalisesti.

Kuinka siirrät tietoja navigoinnissa react-router-Domissa

React Routerissa tiedot voidaan siirtää navigoinnin kautta historia-API:n tilaobjektin avulla. Tilaobjektiin pääsee käsiksi minkä tahansa a:n esittämän komponentin rekvisiittajen kautta komponentti. Voit siirtää tietoja lisäämällä sen tilaobjektiin, kun kutsut navigointitoimintoa. Esimerkiksi:

const { historia } = this.props;
history.push({
polkunimi: '/joku/polku',
tila: { someData: 'data' }
});