A React Router 404 átirányítással kapcsolatos fő probléma az, hogy nehéz lehet megvalósítani. Mivel a React Router nem rendelkezik beépített 404-es oldallal, a fejlesztőknek manuálisan kell létrehozniuk egy útvonalat a 404-es oldalhoz, majd be kell állítaniuk az útválasztót, hogy átirányítsa azokat a kéréseket, amelyek nem egyeznek egy meglévő útvonallal. Ehhez további kódra és konfigurációra van szükség, ami időigényes lehet, és nehéz hibakeresést végezni, ha valami hiba történik. Ezenkívül, ha a felhasználó közvetlenül egy nem létező URL-re navigál, továbbra is hibaoldalt fog látni, ahelyett, hogy a 404-es oldalra irányítaná át.
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>
);
// 1. sor: Ez a sor importálja a BrowserRouter, Route és Switch összetevőket a react-router-dom könyvtárból.
// 3. sor: Ez a sor egy App nevű függvényt határoz meg, amely a JSX-et adja vissza.
// 5-7. sorok: Ezek a sorok az App komponenst a react-router-dom Router komponensbe foglalják.
// 8-10. sor: Ezek a sorok két útvonalat határoznak meg a Kezdőlap és a Névjegy összetevők számára.
// 12. sor: Ez a sor egy útvonalat határoz meg, amely átirányít a kezdőlapra, ha nincs más útvonal.
Mi az a 404-es hibakód?
A React Router 404-es hibakódja egy HTTP állapotkód, amely azt jelzi, hogy a kért erőforrás nem található. Általában akkor jelenik meg, amikor a felhasználó olyan oldalhoz vagy útvonalhoz próbál hozzáférni, amely nem létezik. Ez akkor fordulhat elő, ha a felhasználó rosszul gépelt be egy URL-t, vagy ha az oldalt eltávolították vagy áthelyezték a rá mutató hivatkozások frissítése nélkül. Amikor ez megtörténik, a React Router egy általános 404-es oldalt jelenít meg egy megfelelő üzenettel, amely tájékoztatja a felhasználót a hibáról.
404 Átirányítás
A React Routerben a 404-es átirányítás egy módja annak, hogy a felhasználókat egy másik oldalra irányítsák át, amikor érvénytelen URL-hez próbálnak hozzáférni. Ez hasznos lehet annak érdekében, hogy a felhasználók jobb élményben részesüljenek, amikor helytelen URL-t adnak meg, vagy nem létező oldalt próbálnak meg elérni. A 404-es átirányítás a React Router átirányítási összetevőjével valósítható meg, amely lehetővé teszi annak az oldalnak az elérési útját, amelyre a felhasználót át szeretné irányítani. Például, ha valaki megpróbál hozzáférni az /invalid-url címhez, használhatja az Átirányítás összetevőt a következőképpen:
