Sådan opretter du en 404-side i React ved hjælp af React Router

Før eller siden vil en bruger besøge en URL, der ikke findes på dit websted. Hvad brugeren gør efter dette er op til dig.

De kan trykke på tilbage-knappen og forlade dit websted. I stedet kan du give en nyttig 404-side for at hjælpe dem med at fortsætte med at navigere til dit websted.

For React-websteder kan du bruge React-routeren til at oprette en nyttig 404-side, der ikke er fundet.

Oprettelse af en 404-side

Det 404 fejl opstår, når du forsøger at besøge en side på et websted, som serveren ikke kan finde. Som udvikler betyder håndtering af 404-fejl at oprette en side, som serveren bruger som erstatning, når den ikke kan finde den anmodede side.

I React gør du dette ved at oprette en ikke-fundet komponent, der gengives på ruter, der ikke eksisterer.

Denne artikel antager, at du allerede har en fungerende React-applikation med opsætning af routing. Hvis du ikke gør det, oprette en React-applikation og derefter installere React Router.

Opret en ny fil kaldet NotFound.js og tilføj følgende kode for at oprette 404-siden.

importere { Link } fra "reager-router-dom";
eksportStandardfungereIkke fundet() {
Vend tilbage (
<div>
<h1>Ups! Du ser ud til at være fortabt.</h1>
<s>Her er nogle nyttige links:</s>
<Link til ='/'>Hjem</Link>
<Link til ='/blog'>Blog</Link>
<Link til ='/contact'>Kontakt</Link>
</div>
 )
}

Denne 404-side gengiver en besked og links til at omdirigere en bruger til almindelige sider på webstedet.

Rute til 404-siden

Du kan oprette en normal rute ved hjælp af React-router på denne måde:

importere { Rute, ruter } fra "reager-router-dom";
fungereApp() {
Vend tilbage (
<Ruter>
<Rutesti="/" element={ <Hjem/> }/>
</Routes>
 )
}

Du angiver URL-stien og det element, du vil gengive på den rute.

404-siden vises for stier, der ikke findes på webstedet. Så i stedet for at angive stien, brug en stjerne (*).

<Rutesti='*' element={<Ikke fundet />}/>

Ved brug af * gengiver NotFound-komponenten for alle de URL'er, der ikke er angivet i ruter.

Routing i React

Du kan nemt oprette en 404-side for alle URL'er, der ikke findes i din React-webapp ved hjælp af en router.

Browsere har en standard 404-side, men ved at oprette en brugerdefineret side kan du fortælle dine brugere, hvad der gik galt, og hvordan de kan rette det. Du kan også oprette en 404-side, der passer ind i dit brand.