La xaliyay: react router reload page lama helin

Dhibaatada ugu weyn ee la xiriirta React Router bogga dib u soo dejinta ee aan la helin ayaa ah in marka isticmaaluhu dib u cusbooneysiiyo bogga, browserku wuxuu isku dayi doonaa inuu codsi u diro server-ka URL hadda. Si kastaba ha ahaatee, maadaama React Router uu yahay marin-u-socod dhinaca macmiilka ah, ma jiro waddo u dhiganta server-ka URL-ka oo sidaas awgeed 404 aan la helin qalad ayaa soo noqda. Tani waxay noqon kartaa dhibaato gaar ah haddii isticmaalayaashu ay filayaan in waxyaabaha qaarkood ay u muuqdaan kuwo cusub.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Sadarka 1: Khadkani waxa uu ka soo dejiyaa BrowserRouter, Route, iyo qaybaha beddelka ee maktabadda react-router-dom.

// Sadarka 3: Sadarkani waxa uu qeexayaa shaqada loo yaqaan App-ka oo soo celisa koodka JSX.

// Sadarka 5: Sadarkani waxa uu ku duubaa dhammaan koodka JSX ee qayb ka mid ah router-ka react-router-dom.

// Sadarka 6: Xariiqdani waxa ay ku duuduubtaa dhammaan dariiqyada qayb ka mid ah 'Switch' oo ka imanaya react-router-dom.

// Sadarka 7-9: Xadadkani waxay qeexayaan laba dariiqo '/' iyo'/ku saabsan' siday u kala horreeyaan qaybaha ay ka kooban yihiin (Guriga iyo Ku saabsan).

// Sadarka 11 – 12: Xadadkani waxay qeexayaan dariiqa marka aanay wadooyin kale ku haboonayn, taasoo ka dhigaysa h1 sumad odhanaysa "Bogga lama helin".

Bogga khalad lama helin

Bogga aan laga helin qaladka React Router waa qalad dhaca marka isticmaaluhu isku dayo inuu galo bog ama waddo aan jirin. Tani waxay dhici kartaa haddii isticmaaluhu uu si khaldan u qoray URL, ama haddii bogga ay isku dayayaan inay galaan laga saaray ama la guuray. Gudaha React Router, khaladkan waxa lagu xalliyaa isticmaalka qayb ka mid ah ayaa soo bandhigta oo gudbisa hawl soo celisa 404 bog. Tani waxay u ogolaanaysaa horumariyayaashu inay abuuraan 404 bog oo caado ah oo wata wax kasta oo ay rabaan, sida xiriirinta waxtarka leh ama fariin raaligelin ah.

Sideen u maamulaa Bogga aan laga helin React router

Markaad isticmaalayso React Router, waxaad xamili kartaa bogga aan la helin adiga oo abuuraya waddo gaar ah oo bixin doonta qayb NotFound ah marka URL-ku aanu ku habboonayn mid ka mid ah waddooyinka jira. Si tan loo sameeyo, waxaad u baahan tahay inaad abuurto waddo cusub oo leh dariiqa loo dejiyay "*" oo aad keento qaybtaada NotFound.

Tusaale ahaan:

} />

Tani waxay la mid noqon doontaa URL kasta oo aan hore ugu dhigmin waddo jirta oo waxay siin doontaa qaybtaada NotFound.

Sideen ugu qasbaa bogga falcelinta inuu dib u soo rogo

Gudaha React Router, waxaad ku qasbi kartaa bogga inuu dib u soo dejiyo adiga oo isticmaalaya habka beddelka shayga taariikhda. Tani waxay ku beddeli doontaa gelitaanka hadda ee kaydka taariikhda mid cusub, sidaas darteed waxay ku qasbi doontaa dib-u-soo-celinta bogga. Si aad u isticmaasho habkan, waxaad u baahan tahay inaad marka hore gasho shayga taariikhda. Waxaad tan ku samayn kartaa adiga oo u gudbiya sidii qalab marka aad abuurayso qaybta routerkaaga:

const AppRouter = () => (

{/* Wadooyinkaaga halkan */}

);

Marka aad gasho shayga taariikhda, waxaad isticmaali kartaa habkeeda beddelka sida:

history.bedel('/qaar-dariiq');