404-es oldal létrehozása a Reactban a React Router használatával

Előbb vagy utóbb a felhasználó olyan URL-t fog felkeresni, amely nem létezik az Ön webhelyén. Önön múlik, hogy ezután mit tesz a felhasználó.

Előfordulhat, hogy megnyomják a Vissza gombot, és elhagyják a webhelyet. Ehelyett megadhat egy hasznos 404-es oldalt, amely segít nekik továbbra is a webhelyére navigálni.

A React webhelyek esetében a React router segítségével létrehozhat egy hasznos 404-es nem található oldalt.

404-es oldal létrehozása

A 404-es hiba akkor fordul elő, amikor megpróbál felkeresni egy webhely olyan oldalát, amelyet a szerver nem talál. Fejlesztőként a 404-es hibák kezelése egy olyan oldal létrehozását jelenti, amelyet a szerver helyettesít, ha nem találja a kért oldalt.

A React alkalmazásban ezt úgy teheti meg, hogy létrehoz egy nem található összetevőt, amely nem létező útvonalakon jelenik meg.

Ez a cikk azt feltételezi, hogy már rendelkezik egy működő React alkalmazással, amelyen be van állítva az útválasztás. Ha nem, hozzon létre egy React alkalmazást majd telepítse React Router.

Hozzon létre egy új fájlt NotFound.js néven, és adja hozzá a következő kódot a 404-es oldal létrehozásához.

import { Link } tól től "react-router-dom";
exportalapértelmezettfunkcióNem található() {
Visszatérés (
<div>
<h1>Hoppá! Úgy tűnik, elveszett.</h1>
<p>Íme néhány hasznos link:</p>
<Link a='/'>itthon</Link>
<Link a='/blog'>Blog</Link>
<Link a='/contact'>Kapcsolatba lépni</Link>
</div>
 )
}

Ez a 404-es oldal egy üzenetet és linkeket jelenít meg, amelyek átirányítják a felhasználót a webhely gyakori oldalaira.

Útválasztás a 404-es oldalra

Normál útvonalat hozhat létre a React router segítségével:

import { Útvonal, Útvonalak } tól től "react-router-dom";
funkcióApp() {
Visszatérés (
<Útvonalak>
<Útvonal útvonala="/" elem={ <Itthon/> }/>
</Routes>
 )
}

Megadhatja az URL elérési utat és az útvonalon megjeleníteni kívánt elemet.

A 404-es oldal a webhelyen nem létező elérési utak esetében jelenik meg. Tehát az elérési út megadása helyett használjon egy csillagot (*).

<Útvonal útvonala='*' elem={<Nem található />}/>

Használata * megjeleníti a NotFound komponenst az útvonalakban nem megadott összes URL-hez.

Útválasztás a Reactban

Egy útválasztó segítségével könnyedén létrehozhat egy 404-es oldalt minden olyan URL-hez, amely nem létezik a React webalkalmazásában.

A böngészőknek van egy alapértelmezett 404-es oldaluk, de egy egyéni oldal létrehozása lehetővé teszi, hogy elmondja a felhasználóknak, hogy mi hibázott, és hogyan javíthatják ki. Létrehozhat egy 404-es oldalt is, amely illeszkedik a márkájához.