El principal problema relacionat amb la redirecció de React Router 404 és que pot ser difícil d'implementar. Com que React Router no té una pàgina 404 integrada, els desenvolupadors han de crear manualment una ruta per a la pàgina 404 i després configurar l'encaminador per redirigir les sol·licituds que no coincideixin amb una ruta existent. Això requereix codi i configuració addicionals, que poden consumir molt de temps i difícils de depurar si alguna cosa va malament. A més, si un usuari navega directament a un URL que no existeix, encara veurà una pàgina d'error en lloc de ser redirigit a la pàgina 404.
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>
);
// Línia 1: aquesta línia importa els components BrowserRouter, Route i Switch de la biblioteca react-router-dom.
// Línia 3: aquesta línia defineix una funció anomenada App que retorna JSX.
// Línies 5-7: aquestes línies embolcallen el component App en un component Router de react-router-dom.
// Línies 8-10: aquestes línies defineixen dues rutes per als components Inici i Sobre, respectivament.
// Línia 12: aquesta línia defineix una ruta que redirigeix a la pàgina d'inici si no hi coincideix cap altra ruta.
Què és un codi d'error 404
Un codi d'error 404 a React Router és un codi d'estat HTTP que indica que no s'ha pogut trobar el recurs sol·licitat. Normalment es retorna quan un usuari intenta accedir a una pàgina o ruta que no existeix. Això pot passar si l'usuari ha escrit malament un URL, o si la pàgina s'ha eliminat o mogut sense actualitzar-hi els enllaços. Quan això succeeix, React Router mostrarà una pàgina genèrica 404 amb un missatge adequat informant l'usuari del seu error.
404 Redirecció
A React Router, una redirecció 404 és una manera de redirigir els usuaris a una pàgina diferent quan intenten accedir a un URL no vàlid. Això pot ser útil per oferir als usuaris una millor experiència quan introdueixen un URL incorrecte o intenten accedir a una pàgina que no existeix. La redirecció 404 es pot implementar mitjançant el component Redirect de React Router, que us permet especificar el nom de ruta de la pàgina a la qual voleu redirigir l'usuari. Per exemple, si algú intenta accedir a /invalid-url, podeu utilitzar el component de redirecció d'aquesta manera:
