Galvenā problēma, kas saistīta ar datu nodošanu reaģēšanas maršrutētāja vēsturē, ir tāda, ka dati netiek saglabāti lapas atsvaidzināšanas laikā. Kad lietotājs atsvaidzina lapu, vēsturē.push saglabātie dati tiks zaudēti un nebūs pieejami turpmākai lapas ielādei. Tas var izraisīt neparedzētu darbību un var radīt problēmas, mēģinot piekļūt vai saglabāt datus no iepriekšējās lapas ielādes.
import { useHistory } from "react-router-dom";
const MyComponent = () => {
const history = useHistory();
const handleClick = (data) => {
history.push({ pathname: "/mypage", state: data });
};
return <button onClick={() => handleClick({ someData: "data" })}>Go</button>;
};
1. Šajā rindā tiek importēts āķis useHistory no react-router-dom bibliotēkas, kas nodrošina piekļuvi vēstures objektam, kas reģistrē pašreizējo atrašanās vietu lietotnē.
2. Šī rinda deklarē funkcionālo komponentu ar nosaukumu MyComponent un piešķir to nemainīgam mainīgajam.
3. Šajā rindā tiek izmantots 1. rindā importētais āķis useHistory, lai piekļūtu vēstures objektam un piešķirtu to nemainīgam mainīgajam, ko sauc par vēsturi.
4. Šajā rindā tiek deklarēta funkcija, ko sauc par handleClick, kas ņem argumentu, ko sauc par datiem, un nospiež objektu, kurā ir ceļa nosaukums un stāvokļa rekvizīti, vēstures kaudzē, izmantojot history.push().
5. Šī rinda atgriež pogas elementu ar onClick notikumu apdarinātāju, kas izsauc HandClick() ar objektu, kura arguments ir someData, kad lietotājs uz tā noklikšķina.
Vēstures grūdiens
History push in React Router ir metode, ko izmanto, lai programmatiski mainītu URL pārlūkprogrammā, neizraisot lapas atsvaidzināšanu. Tas ļauj izstrādātājiem izveidot vienas lapas lietojumprogrammas, kas joprojām spēj apstrādāt navigāciju un dziļās saites. History push darbojas, izmantojot pārlūkprogrammas vēstures API, kas ļauj izstrādātājiem manipulēt ar pašreizējo URL, nepārlādējot lapu. Tādējādi lietotāji var pārvietoties starp dažādām lietojumprogrammas lapām, neveicot atkārtotu ielādi katru reizi. Turklāt to var izmantot dziļai saitei, ļaujot lietotājiem izveidot saiti tieši uz konkrētām lietojumprogrammas daļām.
Kā react maršrutētājā izmantot vēsturi
React Router nodrošina veidu, kā izmantot vēsturi jūsu React lietojumprogrammās. Vēsture ļauj izsekot pašreizējai lapai, kā arī visām iepriekšējām apmeklētajām lapām. Tas ir noderīgi, lai izveidotu navigāciju un sekotu lietotāja darbībām.
Lai izmantotu vēsturi programmā React Router, jums ir jāizveido vēstures objekts, izmantojot metodi createHistory() no vēstures pakotnes. Tas dos jums piekļuvi tādām metodēm kā push (), aizstāt () un go (). Šīs metodes ļauj manipulēt ar pārlūkprogrammas URL un lietojumprogrammā pārvietoties starp dažādiem maršrutiem. Varat arī izmantot klausīšanās () metodi, lai uzklausītu izmaiņas URL un attiecīgi atjauninātu savu lietojumprogrammu.
Kad esat izveidojis vēstures objektu, varat to nodot maršrutētāja komponentam, veidojot to. Tas ļaus React Router sekot līdzi visām lietotāju veiktajām izmaiņām un attiecīgi atjaunināt.
Vēstures izmantošana ar React Router ļauj izstrādātājiem vieglāk izveidot jaudīgus navigācijas komponentus, kurus lietotājiem ir viegli saprast un ar tiem mijiedarboties.
