Isonjululwe: dlula idatha hamba usabela kwi-router dom

Ingxaki ephambili enxulumene nokudlulisa idatha xa uhamba nge-React Router DOM kukuba idatha kufuneka idluliselwe kumtya wombuzo we-URL. Oku kuthetha ukuba naluphi na ulwazi olubuthathaka kufuneka lufakwe kwikhowudi phambi kokuba lugqithiswe, njengoko luya kubonakala kwi-URL. Ukongeza, ukuba idatha inkulu kakhulu, inokugqithisa ubude bobude be-URL kwaye ibangele iimpazamo. Okokugqibela, ukuba usebenzisa iReact Router DOM ukuzulazula phakathi kwamaphepha angaphakathi kwesicelo, kufuneka kwakhona ulawule ilizwe kwaye ugcine umkhondo wotshintsho ukuze uqinisekise ukuba onke amacandelo anofikelelo kwidatha 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>
  );
};

// Umgca 1: Lo mgca ungenisa i-hook ye-useHistory kwilayibrari ye-react-router-dom.
// Umgca 3: Lo mgca ubhengeza into eqhubekayo ebizwa ngokuba yiMyComponent engumsebenzi obuyisela i-JSX.
// Umgca 4: Lo mgca ubhengeza imbali ebizwa ngokuba yimbali eyabelwe useHistory hook engeniswe kwi-react-router-dom.
// Umgca 6: Lo mgca uchaza umsebenzi obizwa ngokuba yiHandleClick ethatha kwiparameter enye, idatha.
// Umgca 7: Lo mgca usebenzisa into yembali ukutyhala indlela entsha kwi-stack enegama lendlela '/myroute' kunye nedatha yesimo egqithisiweyo njengento.
// Imigca ye-9 - 11: Le migca ibuyisela i-JSX equlethe into yeqhosha kunye ne-onClick isiganeko somphathi obiza i-handleClick kwaye idlule kwidatha njengengxabano.

React Router Dom

I-React Router DOM lithala leencwadi le-React elivumela abaphuhlisi ukuba benze kwaye balawule iindlela ngaphakathi kwezicelo zabo zeReact. Ibonelela ngamacandelo ayimfuneko ukwakha usetyenziso oluntsonkothileyo, olunamaphepha amaninzi ewebhu kunye neReact, kubandakanywa amacandelo afana neNxulumano, iNdlela, Tshintshela, kunye ne-BrowserRouter. Ikwabonelela ngeempawu ezinjengokulinganisa umzila oguquguqukayo kunye nokulandelwa kwendawo. NgeReact Router DOM, abaphuhlisi banokwenza ngokulula usetyenziso lwephepha elinye elineembono ezininzi kunye neendlela ngaphandle kokulawula ngesandla i-URL okanye imbali yesikhangeli.

Uyidlula njani idatha kwi-react-router-Dom

Kwi-React Router, idatha inokugqithiswa ngokuzulazula usebenzisa into yelizwe ye-API yembali. Injongo karhulumente ifikeleleka ngeeprops zalo naliphi na icandelo elinikezelwe ngu a icandelo. Ukudlulisa idatha, ungayongeza kwinto yelizwe xa ubiza umsebenzi wokukhangela. Umzekelo:

const {imbali } = le.props;
imbali.tyhala({
Igama lendlela: '/enye/indlela',
urhulumente: { someData: 'data'}
});