Rezolvat: routerul de reacție adaugă rezervă pentru a prinde tot

Principala problemă legată de React Router și de adăugarea unei alternative pentru a prinde totul este că poate fi dificil să configurați corect ruta de rezervă. Ruta de rezervă trebuie configurată astfel încât să prindă toate solicitările, inclusiv cele care nu sunt rute valide. Dacă configurarea nu este efectuată corect, atunci solicitările pentru rute invalide nu vor fi capturate de ruta de rezervă și pot avea ca rezultat erori sau comportament neașteptat. În plus, dacă aplicația conține rute dinamice (de exemplu, pe baza intrării utilizatorului), atunci acestea trebuie să fie luate în considerare la configurarea rutei de rezervă, astfel încât să fie și ele prinse de aceasta.

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

// Linia 1: Această linie importă componentele BrowserRouter, Route și Switch din biblioteca react-router-dom.
// Linia 2: Această linie definește o constantă numită App care este o componentă a funcției.
// Linia 3: Această linie redă componenta Router din react-router-dom.
// Linia 4: Această linie redă componenta Switch din react-router-dom.
// Liniile 5 și 6: Aceste linii redă două componente de traseu cu căi exacte și componente care urmează să fie redate atunci când acele căi sunt potrivite.
// Linia 8: Această linie redă o rută alternativă dacă niciuna dintre celelalte rute nu este potrivită. Va reda componenta NoMatch dacă nicio altă rută nu se potrivește.

Ce este routerul de reactie

React Router este o bibliotecă de rutare pentru aplicațiile React. Permite dezvoltatorilor să creeze rute și componente care pot fi folosite pentru a naviga între diferite pagini dintr-o aplicație React. De asemenea, oferă funcții precum potrivirea dinamică a rutei, parametrii de interogare și starea locației. În plus, oferă suport pentru randarea pe server și împărțirea codului.

Traseu alternativ

O rută alternativă catch-all este o rută în React Router care se potrivește cu orice cale care nu a fost potrivită de nicio altă rută. Acest tip de traseu este adesea folosit pentru a crea o pagină 404 sau pentru a reda o componentă pentru toate căile nepotrivite. Este important de reținut că ruta de rezervă catch-all ar trebui să fie întotdeauna ultima rută din lista de rute, deoarece se va potrivi cu orice cale și va împiedica potrivirea altor rute.

Cum să definiți corect ruta de rezervă

Când utilizați React Router, o rută alternativă este o rută care este utilizată atunci când nicio altă rută nu se potrivește cu adresa URL solicitată. De obicei, este folosit pentru a redirecționa utilizatorii către o pagină 404 sau o altă pagină atunci când adresa URL solicitată nu există.

Pentru a defini corect o rută de rezervă în React Router, trebuie mai întâi să creați un componentă și înfășurați-o în jurul rutelor dvs. În interiorul componentă, ar trebui să includeți rutele dvs. normale urmate de a componentă fără o cale specificată. Aceasta va fi ruta dvs. de rezervă și va prelua orice solicitări care nu se potrivesc cu niciuna dintre celelalte rute ale dvs. Puteți specifica apoi ce ar trebui să se întâmple atunci când această rută este potrivită, cum ar fi redirecționarea către o pagină 404 sau afișarea unui alt conținut.

De ce ruta de rezervă a fost întotdeauna declanșată

Ruta de rezervă în React Router este întotdeauna declanșată atunci când o cale URL nu se potrivește cu niciuna dintre rutele existente. Acest lucru se poate întâmpla atunci când un utilizator introduce manual o adresă URL incorectă sau dacă logica de rutare a aplicației nu este configurată corect. Ruta de rezervă permite dezvoltatorilor să gestioneze aceste scenarii cu grație și să ofere feedback utilizatorului, cum ar fi o pagină 404 sau redirecționarea acestora către pagina de pornire.