Galvenā problēma, kas saistīta ar datu nodošanu, navigējot ar React Router DOM, ir tāda, ka dati ir jānodod URL vaicājuma virknē. Tas nozīmē, ka jebkura sensitīva informācija pirms nodošanas ir jākodē, jo tā būs redzama vietrādī URL. Turklāt, ja dati ir pārāk lieli, tie var pārsniegt maksimālo URL garumu un radīt kļūdas. Visbeidzot, ja izmantojat React Router DOM, lai pārvietotos starp lietojumprogrammas lapām, jums ir arī manuāli jāpārvalda stāvoklis un jāseko līdzi izmaiņām, lai nodrošinātu, ka visiem komponentiem ir piekļuve vieniem un tiem pašiem datiem.
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>
);
};
// 1. rinda: šī rinda importē useHistory āķi no react-router-dom bibliotēkas.
// 3. rinda: šī rinda deklarē konstanti ar nosaukumu MyComponent, kas ir funkcija, kas atgriež JSX.
// 4. rinda: šī rinda deklarē konstanti, ko sauc par vēsturi, kas tiek piešķirta useHistory hook, kas importēts no react-router-dom.
// 6. rindiņa: šī rinda deklarē funkciju, ko sauc par handleClick, kas uzņem vienu parametru, datus.
// 7. rindiņa: šajā rindā tiek izmantots vēstures objekts, lai stekā ievietotu jaunu maršrutu ar ceļa nosaukumu “/myroute” un stāvokļa datiem, kas nodoti kā objekts.
// 9.–11. rinda: šīs rindas atgriež JSX, kas satur pogas elementu ar onClick notikumu apdarinātāju, kas izsauc HandClick un nodod datus kā argumentu.
Reaģēt maršrutētāja dom
React Router DOM ir React maršrutēšanas bibliotēka, kas ļauj izstrādātājiem izveidot un pārvaldīt maršrutus savās React lietojumprogrammās. Tas nodrošina galvenos komponentus, kas nepieciešami, lai izveidotu sarežģītas, vairāku lapu tīmekļa lietojumprogrammas ar React, tostarp tādi komponenti kā saite, maršruts, slēdzis un BrowserRouter. Tas nodrošina arī tādas funkcijas kā dinamiska maršruta saskaņošana un atrašanās vietas izsekošana. Izmantojot React Router DOM, izstrādātāji var viegli izveidot vienas lapas lietojumprogrammas ar vairākiem skatiem un maršrutiem, manuāli nepārvaldot URL vai pārlūkprogrammas vēsturi.
Kā pārsūtīt datus caur navigāciju pakalpojumā React-router-Dom
Programmā React Router datus var nodot navigācijā, izmantojot vēstures API stāvokļa objektu. Stāvokļa objekts ir pieejams, izmantojot jebkura komponenta rekvizītus, ko atveido a
const {vēsture} = this.props;
history.push({
ceļa nosaukums: '/some/path',
stāvoklis: { someData: 'data'}
});
