Kuxazululiwe: dlulisa idatha zulazula i-react router dom

Inkinga enkulu ehlobene nokudlulisa idatha lapho uzulazula nge-React Router DOM ukuthi idatha kufanele idluliselwe kuyunithi yezinhlamvu zombuzo we-URL. Lokhu kusho ukuthi noma yiluphi ulwazi olubucayi kufanele lubhalwe ngekhodi ngaphambi kokuthi ludlulwe, njengoba luzobonakala ku-URL. Ukwengeza, uma idatha inkulu kakhulu, ingase yeqe ubude obuphelele be-URL futhi ibangele amaphutha. Okokugcina, uma usebenzisa i-React Router DOM ukuze uzulazule phakathi kwamakhasi ngaphakathi kohlelo lokusebenza, kufanele futhi ulawule isimo mathupha futhi ulandelele izinguquko ukuze uqinisekise ukuthi zonke izingxenye zifinyelela idatha efanayo.

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

// Umugqa 1: Lo mugqa ungenisa ihuku ye-useHistory kusuka kulabhulali ye-react-router-dom.
// Umugqa wesi-3: Lo mugqa umemezela njalo okubizwa ngokuthi i-MyComponent okuwumsebenzi obuyisela i-JSX.
// Umugqa wesi-4: Lo mugqa umemezela umlando obizwa njalo onikezwe ihuku ye-useHistory engeniswe isuka ku-react-router-dom.
// Umugqa wesi-6: Lo mugqa umemezela umsebenzi obizwa nge-handleClick othatha ipharamitha eyodwa, idatha.
// Umugqa wesi-7: Lo mugqa usebenzisa into yomlando ukuze usunduze umzila omusha esitakini onegama lendlela '/myroute' kanye nedatha yesimo ephasiswe njengento.
// Imigqa 9 – 11: Le migqa ibuyisela i-JSX equkethe into yenkinobho enesibambi se-OnClick esibiza i-handleChofoza bese idlulisela idatha njengengxabano.

I-React Router Dom

I-React Router DOM iwumtapo womzila we-React ovumela onjiniyela ukuthi bakhe futhi baphathe imizila ngaphakathi kwezinhlelo zabo zokusebenza ze-React. Ihlinzeka ngezingxenye ezibalulekile ezidingekayo ukuze kwakhiwe izinhlelo zokusebenza zewebhu eziyinkimbinkimbi, ezinamakhasi amaningi nge-React, okuhlanganisa izingxenye ezifana ne-Link, Umzila, Shintsha, kanye ne-BrowserRouter. Iphinde inikeze izici ezifana nokufanisa umzila oguquguqukayo nokulandelela indawo. Nge-React Router DOM, abathuthukisi bangakha kalula izinhlelo zokusebenza zekhasi elilodwa ezinokubukwa okuningi nemizila ngaphandle kokuphatha mathupha i-URL noma umlando wesiphequluli.

Uyidlula kanjani idatha zulazula ku-react-router-Dom

Ku-React Router, idatha ingadluliswa ngokuzulazula kusetshenziswa into yesimo ye-API yomlando. Into yezwe ifinyeleleka ngezinsiza zanoma iyiphi ingxenye enikezwe ngu-a ingxenye. Ukudlulisa idatha, ungayengeza entweni yesimo lapho ubiza umsebenzi wokuzulazula. Ngokwesibonelo:

const { umlando } = this.props;
umlando.phusha({
indlela: '/some/path',
isimo: {someData: 'data'}
});