Hovedproblemet knyttet til React Router 404 omdirigering er at det kan være vanskelig å implementere. Siden React Router ikke har en innebygd 404-side, må utviklere manuelt opprette en rute for 404-siden og deretter konfigurere ruteren til å omdirigere eventuelle forespørsler som ikke samsvarer med en eksisterende rute. Dette krever ekstra kode og konfigurasjon, noe som kan være tidkrevende og vanskelig å feilsøke hvis noe går galt. I tillegg, hvis en bruker navigerer direkte til en URL som ikke eksisterer, vil de fortsatt se en feilside i stedet for å bli omdirigert til 404-siden.
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
{/* 404 Redirect */}
<Route render={() => (<Redirect to="/" />)} />
</Switch>
</Router>
);
// Linje 1: Denne linjen importerer BrowserRouter-, Route- og Switch-komponentene fra react-router-dom-biblioteket.
// Linje 3: Denne linjen definerer en funksjon kalt App som returnerer JSX.
// Linje 5-7: Disse linjene omslutter app-komponenten i en ruter-komponent fra react-router-dom.
// Linje 8-10: Disse linjene definerer to ruter for henholdsvis Hjem- og Om-komponentene.
// Linje 12: Denne linjen definerer en rute som omdirigerer til hjemmesiden hvis ingen annen rute matcher.
Hva er en 404-feilkode
En 404-feilkode i React Router er en HTTP-statuskode som indikerer at den forespurte ressursen ikke ble funnet. Den returneres vanligvis når en bruker forsøker å få tilgang til en side eller rute som ikke eksisterer. Dette kan skje hvis brukeren har skrevet feil URL, eller hvis siden har blitt fjernet eller flyttet uten å oppdatere lenkene til den. Når dette skjer, vil React Router vise en generisk 404-side med en passende melding som informerer brukeren om feilen.
404 Omadresser
I React Router er en 404-viderekobling en måte å omdirigere brukere til en annen side når de prøver å få tilgang til en ugyldig URL. Dette kan være nyttig for å gi brukere en bedre opplevelse når de skriver inn en feil URL eller prøver å få tilgang til en side som ikke eksisterer. 404-omdirigeringen kan implementeres ved å bruke Redirect-komponenten fra React Router, som lar deg spesifisere stinavnet til siden du vil omdirigere brukeren til. For eksempel, hvis noen prøver å få tilgang til /invalid-url, kan du bruke Redirect-komponenten slik:
