Rezoud: pase done nan istwa routeur reyaji%2Cpush

Pwoblèm prensipal ki gen rapò ak pase done nan istwa routeur reyaji, pouse se ke done yo pa pèsiste atravè rafrechi paj. Lè yon itilizatè rafrechi paj la, done ki estoke nan history.push yo pral pèdi epi yo p ap disponib pou itilize sou chaj paj ki vin apre yo. Sa ka mennen nan konpòtman inatandi epi li ka lakòz pwoblèm lè w ap eseye jwenn aksè oswa estoke done ki soti nan yon chaj paj anvan.

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. Liy sa a enpòte zen an useHistory soti nan bibliyotèk la reyaji-routeur-dom, ki bay aksè a objè a istwa ki kenbe tras nan kote aktyèl la nan app a.

2. Liy sa a deklare yon eleman fonksyonèl ki rele MyComponent epi li bay yon varyab konstan.

3. Liy sa a sèvi ak zen useHistory enpòte nan liy 1 pou jwenn aksè nan objè istwa a epi bay li nan yon varyab konstan ki rele istwa.

4. Liy sa a deklare yon fonksyon ki rele handleClick ki pran yon agiman ki rele done epi pouse yon objè ki genyen non chemen ak pwopriyete eta sou pil istwa a lè l sèvi avèk history.push().

5. Liy sa a retounen yon eleman bouton ak yon moun kap okipe evènman onClick ki rele handleClick() ak yon objè ki genyen someData kòm agiman li lè yon itilizatè klike sou.

Istwa pouse

Pouse istwa nan React Router se yon metòd ki itilize pou chanje adrès entènèt la nan navigatè a san li pa lakòz yon rafrechisman paj. Li pèmèt devlopè yo kreye aplikasyon pou yon sèl paj ki toujou kapab okipe navigasyon ak lyen pwofon. Pouse istwa travay lè l sèvi avèk API istwa navigatè a, ki pèmèt devlopè yo manipile URL aktyèl la san yo pa rechaje paj la. Sa fè li posib pou itilizatè yo navige ant diferan paj nan yon aplikasyon san yo pa oblije rechaje chak fwa. Anplis de sa, li ka itilize pou lyen pwofon, ki pèmèt itilizatè yo konekte dirèkteman nan pati espesifik nan yon aplikasyon.

Kouman pou mwen itilize istwa nan routeur reyaji

React Router bay yon fason pou itilize istwa nan aplikasyon React ou yo. Istwa pèmèt ou kenbe tras de paj aktyèl la, osi byen ke nenpòt paj anvan yo te vizite. Sa a itil pou kreye navigasyon ak kenbe tras nan aksyon itilizatè yo.

Pou itilize istwa nan React Router, ou bezwen kreye yon objè istwa lè l sèvi avèk metòd createHistory() ki soti nan pake istwa a. Sa a pral ba ou aksè a metòd tankou push(), ranplase (), ak ale (). Metòd sa yo pèmèt ou manipile URL navigatè a epi navige ant diferan wout nan aplikasyon w lan. Ou kapab tou itilize metòd listen() pou koute chanjman nan URL la epi mete ajou aplikasyon w lan kòmsadwa.

Yon fwa ou te kreye yon objè istwa, ou ka pase li nan eleman routeur ou a lè w ap kreye li. Sa a pral pèmèt React Router kenbe tras tout chanjman itilizatè yo fè epi mete ajou kòmsadwa.

Sèvi ak istwa ak React Router fè li pi fasil pou devlopè yo kreye eleman navigasyon pwisan ki fasil pou itilizatè yo konprann epi kominike avèk yo.