Yakagadziriswa: pfuura data famba react router dom

Dambudziko guru rine chekuita nekupfuura data paunenge uchifamba neReact Router DOM nderekuti iyo data inofanirwa kupfuudzwa muURL yemubvunzo tambo. Izvi zvinoreva kuti chero ruzivo rwakadzama runofanirwa kuvharwa rusati rwapfuudzwa, sezvo ruchaonekwa muURL. Pamusoro pezvo, kana iyo data yakakurisa, inogona kudarika kureba kweURL uye kukonzera kukanganisa. Chekupedzisira, kana iwe uri kushandisa React Router DOM kufamba pakati pemapeji mukati mekushandisa, iwe unofanirwawo kutonga nemaoko nyika uye nekutevera shanduko kuti uve nechokwadi chekuti zvikamu zvese zvinowana data rakafanana.

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

// Mutsara 1: Mutsetse uyu unopinza useHistory hoko kubva kune react-router-dom raibhurari.
// Mutsara 3: Mutsara uyu unozivisa nguva dzose inonzi MyComponent iyo ibasa rinodzorera JSX.
// Mutsara wechina: Uyu mutsara unozivisa inogara ichinzi nhoroondo inopihwa kune useHistory hook inotorwa kubva kune react-router-dom.
// Mutsara wechitanhatu: Uyu mutsetse unozivisa basa rinonzi handleClick rinotora mune imwe parameter, data.
// Mutsara wechinomwe: Mutsara uyu unoshandisa chinhu chenhoroondo kusundira nzira nyowani pastack ine zita renzira '/myroute' uye data renyika rakapfuura sechinhu.
// Mitsara 9 - 11: Mitsetse iyi inodzorera JSX ine bhatani chinhu chine onClick chiitiko chinobata chinodaidza handleClick uye inopfuura mune data senharo.

React Router Dom

React Router DOM iraibhurari yenzira yeReact iyo inobvumira vanogadzira kugadzira uye kugadzirisa nzira mukati meReact application yavo. Inopa izvo zvakakosha zvinodikanwa kuvaka yakaoma, yakawanda-mapeji ewebhu maapplication neReact, kusanganisira zvinhu zvakaita seLinganiso, Nzira, Shandura, uye BrowserRouter. Inopawo maficha akadai seyakasimba nzira yekufananidza uye yekutevera nzvimbo. NeReact Router DOM, vagadziri vanogona kugadzira zviri nyore mapeji mapeji ane maonero akawanda uye nzira pasina kubata nemaoko URL kana browser browser.

Iwe unopfuudza sei data kuburikidza nekufambisa mune react-router-Dom

MuReact Router, data inogona kupfuudzwa kuburikidza nekufambisa uchishandisa iyo mamiriro chinhu cheiyo nhoroondo API. Chinhu chehurumende chinosvikika kuburikidza nemaprops echero chikamu chinopihwa nea chikamu. Kuti upfuure data, unogona kuiwedzera kuchinhu chehurumende paunenge uchidana basa rekufambisa. Semuyenzaniso:

const {nhoroondo} = this.props;
history.push({
nzira zita: '/ vamwe/nzira',
nyika: {someData: 'data'}
});