Rešeno: react ruter dodaje rezervni za sve

Glavni problem u vezi sa React Routerom i dodavanjem rezervne rute za sve je to što može biti teško pravilno konfigurirati rezervnu rutu. Rezervna ruta mora biti konfigurirana na takav način da će uhvatiti sve zahtjeve, uključujući i one koji nisu valjani. Ako se konfiguracija ne izvrši ispravno, tada zahtjevi za nevažećim rutama neće biti uhvaćeni rezervnom rutom i mogu dovesti do grešaka ili neočekivanog ponašanja. Dodatno, ako aplikacija sadrži dinamičke rute (npr. zasnovane na korisničkom unosu), onda ih treba uzeti u obzir prilikom konfiguriranja rezervne rute tako da ih ona također uhvati.

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>  
);

// Linija 1: Ova linija uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.
// Linija 2: Ova linija definira konstantu pod nazivom App koja je komponenta funkcije.
// Linija 3: Ova linija prikazuje komponentu rutera iz react-router-dom.
// Linija 4: Ova linija prikazuje komponentu Switch iz react-router-dom.
// Linije 5 i 6: Ovi redovi prikazuju dvije komponente rute s tačnim stazama i komponentama koje će se renderirati kada se te staze podudaraju.
// Linija 8: Ova linija prikazuje rezervnu rutu ako se nijedna od drugih ruta ne podudara. Renderira komponentu NoMatch ako se nijedna druga ruta ne podudara.

Šta je react ruter

React Router je biblioteka rutiranja za React aplikacije. Omogućava programerima da kreiraju rute i komponente koje se mogu koristiti za navigaciju između različitih stranica u React aplikaciji. Također pruža značajke kao što su dinamičko podudaranje ruta, parametri upita i stanje lokacije. Dodatno, pruža podršku za prikazivanje na strani servera i podjelu koda.

Sveobuhvatna rezervna ruta

Sveobuhvatna rezervna ruta je ruta u React Routeru koja se poklapa sa bilo kojom putanjom koja nije uparena ni sa jednom drugom rutom. Ova vrsta rute se često koristi za kreiranje 404 stranice ili za prikazivanje komponente za sve neusklađene putanje. Važno je napomenuti da bi sveobuhvatna rezervna ruta uvijek trebala biti posljednja ruta na listi ruta, jer će odgovarati bilo kojoj putanji i spriječiti uparivanje drugih ruta.

Kako pravilno definirati rezervnu rutu

Kada koristite React Router, rezervna ruta je ruta koja se koristi kada nijedna druga ruta ne odgovara traženom URL-u. Obično se koristi za preusmjeravanje korisnika na stranicu 404 ili neku drugu stranicu kada traženi URL ne postoji.

Da biste ispravno definirali rezervnu rutu u React Routeru, prvo biste trebali kreirati a komponentu i omotajte je oko vaših ruta. Unutar komponentu, trebali biste uključiti svoje normalne rute praćene a komponenta bez specificirane putanje. Ovo će biti vaša rezervna ruta i uhvatit će sve zahtjeve koji ne odgovaraju nijednoj od vaših drugih ruta. Zatim možete odrediti šta će se dogoditi kada se ova ruta podudara, kao što je preusmjeravanje na stranicu 404 ili prikazivanje nekog drugog sadržaja.

Zašto se rezervna ruta uvijek aktivirala

Rezervna ruta u React Routeru se uvijek pokreće kada URL putanja ne odgovara nijednoj od postojećih ruta. Ovo se može dogoditi kada korisnik ručno unese neispravan URL ili ako logika usmjeravanja aplikacije nije pravilno konfigurirana. Rezervna ruta omogućava programerima da elegantno rukuju ovim scenarijima i daju povratne informacije korisniku, kao što je 404 stranica ili njihovo preusmjeravanje na početnu stranicu.