Riješeno: reagirajte na usmjerivač dodajte zamjenu da uhvati sve

Zadnje ažuriranje: 09/11/2023
Autor: JavaScript SourceTrail

Glavni problem vezan uz React Router i dodavanje zamjenske rute za sve je to što može biti teško ispravno konfigurirati zamjensku rutu. Zamjenska ruta mora biti konfigurirana na takav način da će uhvatiti sve zahtjeve, uključujući one koji nisu važeće rute. Ako konfiguracija nije učinjena ispravno, zahtjevi za nevažećim rutama neće biti uhvaćeni rezervnom rutom i mogu rezultirati pogreškama ili neočekivanim ponašanjem. Dodatno, ako aplikacija sadrži dinamičke rute (npr. temeljene na korisničkom unosu), tada ih je potrebno uzeti u obzir prilikom konfiguriranja zamjenske rute kako bi i one bile uhvaćene.

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

// Red 1: Ovaj red uvozi komponente BrowserRouter, Route i Switch iz biblioteke react-router-dom.
// Redak 2: Ovaj redak definira konstantu koja se zove App koja je funkcijska komponenta.
// Redak 3: Ovaj redak renderira komponentu usmjerivača iz react-router-dom.
// Redak 4: Ovaj redak renderira komponentu Switch iz react-router-dom.
// Redovi 5 i 6: Ovi redovi prikazuju dvije komponente rute s točnim stazama i komponentama koje se prikazuju kada se te staze podudaraju.
// Redak 8: Ovaj redak prikazuje zamjensku rutu ako se nijedna druga ruta ne podudara. Prikazat će komponentu NoMatch ako se druge rute ne podudaraju.

Što je React router

React Router je biblioteka usmjeravanja za React aplikacije. Programerima omogućuje stvaranje ruta i komponenti 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 rute, parametri upita i stanje lokacije. Dodatno, pruža podršku za iscrtavanje na strani poslužitelja i dijeljenje koda.

Sveobuhvatna rezervna ruta

Zamjenska ruta za sve je ruta u React Routeru koja se podudara s bilo kojom stazom koja se ne podudara s nijednom drugom rutom. Ova vrsta rute često se koristi za stvaranje stranice 404 ili za renderiranje komponente za sve neusklađene staze. Važno je napomenuti da sveobuhvatna zamjenska ruta uvijek treba biti posljednja ruta na popisu ruta jer će odgovarati bilo kojoj stazi i spriječiti usklađivanje drugih ruta.

Kako ispravno 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 pravilno definirali zamjensku rutu u React Routeru, prvo biste trebali stvoriti a komponentu i omotajte je oko svojih ruta. Unutar komponentu, trebali biste uključiti svoje normalne rute nakon kojih slijedi a komponenta bez navedenog puta. Ovo će biti vaša rezervna ruta i uhvatit će sve zahtjeve koji se ne podudaraju ni s jednom od vaših drugih ruta. Zatim možete odrediti što bi se trebalo 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

Zamjenska ruta u React Routeru uvijek se pokreće kada URL staza ne odgovara niti jednoj od postojećih ruta. To se može dogoditi kada korisnik ručno upiše netočan URL ili ako logika usmjeravanja aplikacije nije ispravno konfigurirana. Zamjenska ruta omogućuje programerima elegantno rukovanje ovim scenarijima i pružanje povratnih informacija korisniku, poput stranice 404 ili preusmjeravanja na početnu stranicu.

Povezani postovi:

Ostavite komentar