Løst: reager ruter legg til fallback for å fange alle

Hovedproblemet knyttet til React Router og å legge til en fallback for å fange alt er at det kan være vanskelig å konfigurere reserveruten riktig. Reserveruten må konfigureres på en slik måte at den vil fange opp alle forespørsler, inkludert de som ikke er gyldige ruter. Hvis konfigurasjonen ikke gjøres riktig, vil ikke forespørsler om ugyldige ruter bli fanget opp av reserveruten og kan resultere i feil eller uventet oppførsel. I tillegg, hvis applikasjonen inneholder dynamiske ruter (f.eks. basert på brukerinndata), må disse tas i betraktning når du konfigurerer reserveruten slik at de også fanges opp av den.

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

// Linje 1: Denne linjen importerer BrowserRouter-, Route- og Switch-komponentene fra react-router-dom-biblioteket.
// Linje 2: Denne linjen definerer en konstant kalt App som er en funksjonskomponent.
// Linje 3: Denne linjen gjengir ruterkomponenten fra react-router-dom.
// Linje 4: Denne linjen gjengir Switch-komponenten fra react-router-dom.
// Linje 5 og 6: Disse linjene gjengir to rutekomponenter med eksakte stier og komponenter som skal gjengis når disse banene matches.
// Linje 8: Denne linjen gjengir en reserverute hvis ingen av de andre rutene matches. Den vil gjengi NoMatch-komponenten hvis ingen andre ruter samsvarer.

Hva er react router

React Router er et rutebibliotek for React-applikasjoner. Det lar utviklere lage ruter og komponenter som kan brukes til å navigere mellom forskjellige sider i en React-applikasjon. Den gir også funksjoner som dynamisk rutetilpasning, spørringsparametere og plasseringstilstand. I tillegg gir den støtte for gjengivelse på serversiden og kodedeling.

Fangst mulig reserverute

En oppsamlingsrute er en rute i React Router som samsvarer med en hvilken som helst bane som ikke har blitt matchet av noen andre ruter. Denne rutetypen brukes ofte til å lage en 404-side, eller for å gjengi en komponent for alle uovertrufne stier. Det er viktig å merke seg at oppsamlingsruten alltid bør være den siste ruten i listen over ruter, siden den vil samsvare med alle stier og forhindre at andre ruter blir matchet.

Hvordan definere reserverute riktig

Når du bruker React Router, er en reserverute en rute som brukes når ingen andre ruter samsvarer med den forespurte URL-en. Den brukes vanligvis til å omdirigere brukere til en 404-side eller en annen side når den forespurte nettadressen ikke eksisterer.

For å definere en reserverute riktig i React Router, bør du først opprette en komponent og vikle den rundt rutene dine. Inne i komponent, bør du inkludere dine vanlige ruter etterfulgt av en komponent uten bane spesifisert. Dette vil være reserveruten din og vil fange opp alle forespørsler som ikke samsvarer med noen av de andre rutene dine. Du kan deretter spesifisere hva som skal skje når denne ruten matches, for eksempel å omdirigere til en 404-side eller vise noe annet innhold.

Hvorfor reserveruten alltid ble utløst

Reserveruten i React Router utløses alltid når en URL-bane ikke samsvarer med noen av de eksisterende rutene. Dette kan skje når en bruker manuelt skriver inn en feil URL, eller hvis programmets rutinglogikk ikke er riktig konfigurert. Fallback-ruten lar utviklere håndtere disse scenariene på en elegant måte og gi tilbakemelding til brukeren, for eksempel en 404-side eller omdirigere dem til hjemmesiden.