U zgjidh: reagoni i ruterit, shto një rikthim për të kapur të gjitha

Problemi kryesor në lidhje me React Router dhe shtimin e një kthimi për të kapur të gjitha është se mund të jetë e vështirë të konfigurosh siç duhet rrugën e kthimit. Rruga e kthimit duhet të konfigurohet në atë mënyrë që të kapë të gjitha kërkesat, duke përfshirë ato që nuk janë rrugë të vlefshme. Nëse konfigurimi nuk është bërë si duhet, atëherë kërkesat për rrugë të pavlefshme nuk do të kapen nga rruga e kthimit dhe mund të rezultojnë në gabime ose sjellje të papritura. Për më tepër, nëse aplikacioni përmban rrugë dinamike (p.sh., bazuar në hyrjen e përdoruesit), atëherë këto duhet të merren parasysh gjatë konfigurimit të rrugës së kthimit në mënyrë që edhe ato të kapen prej tij.

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

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

      {/* Fallback route */}
      <Route component={NoMatch} /> 

    </Switch>
  </Router>  
);

// Rreshti 1: Kjo linjë importon komponentët BrowserRouter, Route dhe Switch nga biblioteka react-router-dom.
// Rreshti 2: Kjo linjë përcakton një konstante të quajtur App që është një komponent funksioni.
// Linja 3: Kjo linjë jep komponentin Router nga react-router-dom.
// Linja 4: Kjo linjë jep komponentin Switch nga react-router-dom.
// Linjat 5 dhe 6: Këto rreshta japin dy komponentë Route me shtigje të sakta dhe komponentë që do të jepen kur ato shtigje përputhen.
// Linja 8: Kjo linjë jep një rrugë kthimi nëse asnjë nga rrugët e tjera nuk përputhet. Ai do të japë komponentin NoMatch nëse asnjë rrugë tjetër nuk përputhet.

Çfarë është router reagues

React Router është një bibliotekë rrugëtimi për aplikacionet React. Ai i lejon zhvilluesit të krijojnë rrugë dhe komponentë që mund të përdoren për të lundruar midis faqeve të ndryshme në një aplikacion React. Ai gjithashtu ofron veçori të tilla si përputhja dinamike e rrugës, parametrat e pyetjes dhe gjendja e vendndodhjes. Për më tepër, ai ofron mbështetje për paraqitjen nga ana e serverit dhe ndarjen e kodit.

Rruga e kthimit të të gjithëve

Një itinerar kthimi "catch-all" është një itinerar në React Router që përputhet me çdo shteg që nuk është përputhur me asnjë rrugë tjetër. Ky lloj i rrugës përdoret shpesh për të krijuar një faqe 404, ose për të dhënë një komponent për të gjitha shtigjet e pakrahasueshme. Është e rëndësishme të theksohet se itinerari i kthimit "catch-all-back" duhet të jetë gjithmonë itinerari i fundit në listën e itinerareve, pasi do të përputhet me çdo shteg dhe do të parandalojë që itineraret e tjera të përputhen.

Si të përcaktoni saktë rrugën e kthimit

Kur përdorni React Router, një rrugë kthimi është një rrugë që përdoret kur asnjë rrugë tjetër nuk përputhet me URL-në e kërkuar. Zakonisht përdoret për të ridrejtuar përdoruesit në një faqe 404 ose në ndonjë faqe tjetër kur URL-ja e kërkuar nuk ekziston.

Për të përcaktuar siç duhet një rrugë kthimi në React Router, fillimisht duhet të krijoni një komponent dhe mbështilleni atë rreth rrugëve tuaja. Brenda në komponent, ju duhet të përfshini rrugët tuaja normale të ndjekura nga a komponent pa rrugë të specifikuar. Kjo do të jetë rruga juaj e kthimit dhe do të kapë çdo kërkesë që nuk përputhet me asnjë nga itineraret tuaja të tjera. Më pas mund të specifikoni se çfarë duhet të ndodhë kur kjo rrugë përputhet, si p.sh. ridrejtimi në një faqe 404 ose shfaqja e ndonjë përmbajtjeje tjetër.

Pse rruga e kthimit aktivizohej gjithmonë

Rruga e kthimit në React Router aktivizohet gjithmonë kur një shteg URL nuk përputhet me asnjë nga rrugët ekzistuese. Kjo mund të ndodhë kur një përdorues shkruan manualisht një URL të pasaktë ose nëse logjika e rrugëtimit të aplikacionit nuk është konfiguruar siç duhet. Rruga e kthimit i lejon zhvilluesit t'i trajtojnë këto skenarë me hijeshi dhe t'i japin komente përdoruesit, si p.sh. një faqe 404 ose ridrejtimin e tyre në faqen kryesore.