Een 404-pagina maken in React met behulp van React Router

Vroeg of laat bezoekt een gebruiker een URL die niet op uw website staat. Wat de gebruiker hierna doet, is aan jou.

Ze kunnen op de terugknop drukken en uw site verlaten. In plaats daarvan kunt u een handige 404-pagina opgeven om hen te helpen naar uw website te blijven navigeren.

Voor React-websites kunt u de React-router gebruiken om een ​​handige 404 niet gevonden-pagina te maken.

Een 404-pagina maken

De 404-fout treedt op wanneer u een pagina op een website probeert te bezoeken die de server niet kan vinden. Als ontwikkelaar betekent het afhandelen van 404-fouten het maken van een pagina die de server gebruikt als vervanging wanneer deze de gevraagde pagina niet kan vinden.

In React doe je dit door een niet gevonden component te maken die zal renderen op routes die niet bestaan.

Dit artikel gaat ervan uit dat je al een werkende React-applicatie hebt met routering ingesteld. Als je dat niet doet, maak een React-applicatie en dan installeren Reageer Router.

Maak een nieuw bestand met de naam NotFound.js en voeg de volgende code toe om de 404-pagina te maken.

importeren { Koppeling } van "reageer-router-dom";
exporterenstandaardfunctieNiet gevonden() {
opbrengst (
<div>
<h1>Oeps! Je lijkt verdwaald.</h1>
<P>Hier zijn enkele handige links:</P>
<Link naar='/'>Thuis</Link>
<Link naar='/blog'>bloggen</Link>
<Link naar='/contact'>Contact</Link>
</div>
 )
}

Deze 404-pagina geeft een bericht en links weer om een ​​gebruiker om te leiden naar veelgebruikte pagina's op de website.

Routering naar de 404-pagina

U kunt als volgt een normale route maken met behulp van de React-router:

importeren { Route, Routes } van "reageer-router-dom";
functieapp() {
opbrengst (
<Routes>
<Routepad="/" element={ <Thuis/> }/>
</Routes>
 )
}

U specificeert het URL-pad en het element dat u op die route wilt weergeven.

De 404-pagina wordt weergegeven voor paden die niet op de website bestaan. Gebruik dus in plaats van het pad op te geven een asterisk (*).

<Routepad='*' element={<Niet gevonden />}/>

Gebruik makend van * geeft de component NotFound weer voor alle URL's die niet in routes zijn opgegeven.

Routing in React

U kunt eenvoudig een 404-pagina maken voor alle URL's die niet bestaan ​​in uw React-webapp met behulp van een router.

Browsers hebben een standaard 404-pagina, maar door een aangepaste pagina te maken, kunt u uw gebruikers vertellen wat er mis is gegaan en hoe ze dit kunnen oplossen. U kunt ook een 404-pagina maken die bij uw merk past.