¿Sabes qué es y cómo crear una ruta 404 con React Router? Crear y estructurar la navegación es un paso fundamental en la finalización de nuestros proyectos. React Router es una herramienta que nos permite crear una navegación dinámica, en la que podemos crear, redirigir y anidar rutas en el momento de ejecución.
Sin embargo, hay momentos en los que los usuarios llegan a rutas que no hemos creado. En estos momentos, debemos tener una acción preparada para mostrar el error. En este post, te enseñaremos cómo crear una ruta 404 con React Router, fundamental para dar feedback a nuestros usuarios.
¿Qué es una ruta 404?
Una ruta 404 es una forma de programar una página que le diga al usuario que la ruta insertada no está disponible. Esta ruta es muy habitual en páginas que se han borrado o en rutas mal escritas. El contenido que se renderice en esta ruta es completamente personal, pues depende de la estética de tu página web y del presupuesto que tenga tu proyecto.
Puedes crear desde un simple div con un mensaje de error hasta un diseño ilustrado con el mensaje. A continuación, te enseñaremos cómo crear una ruta 404 con React Router con un simple mensaje de error.
Si todavía no conoces mucho sobre React Router, te invitamos a leer nuestros posts sobre qué es React Router y para qué sirve la librería React Router. Además, te recomendamos leer la documentación oficial en la página reactrouter.com.
¿Cómo crear una ruta 404 con React Router?
Para crear una ruta 404 con React Router, vamos a declarar una ruta como cualquier otra. Si no conoces bien este proceso, te invitamos a leer nuestro post sobre declarar rutas con React Router. Entonces, utilizaremos el componente Route para declarar una nueva ruta dentro de nuestro componente Routes. Recuerda que estos dos componentes forman parte de los componentes principales de React Router.
Para el path de la ruta 404 usaremos un simple «/404». Ten presente que puedes elegir el nombre de ruta que desees, pero este es el estándar. Para el element de tu ruta, podrás renderizar un diseño que ya hayas creado en otro componente o, simplemente, insertar un div con un mensaje. Si deseas poner en práctica la segunda opción, se vería algo como lo siguiente:
<Route path=»/404″ element={<div> 404 | Not Found Page</div>} />
Si, en cambio, quisieras usar la estrategia de renderizar un diseño que hayas construido para tu página de error, deberás llamar al componente que hayas creado. Recuerda que cuando llamas a un componente como valor de element realmente estás llamando al elemento JSX creado. Supongamos que este elemento se llama 404Page. Entonces, para crear una ruta 404 con React Router, podrías usar la siguiente línea de código:
<Route path=»/404″ element={<404Page>} />
Ahora que hemos creado nuestra ruta 404, podemos usarla para redirigir cualquier ruta que no haga match con las rutas que hemos definido anteriormente. Esto hará que cualquier ruta que no exista en la navegación de nuestra aplicación sea redirigida a la ruta 404. Para ello, usaremos el componente Navigate que hemos aprendido a usar en nuestro post sobre redirigir una ruta con React Router.
Para declarar una ruta que no hace match con ninguna otra, podemos usar el símbolo de asterisco (*) en nuestro path.
<Route path=»*» element={<Navigate to=»/404″ />} />
Como puedes ver en el código anterior, crear una ruta 404 con React Router es una buena práctica, porque nos permite redirigir todos los errores de navegación al contenido de esta ruta. Esto nos ahorra tener que declarar el texto 404 para cada error en la navegación, pues basta con usar navigate to=»/404″ para llegar a este espacio.
Te invitamos a probar esta nueva ruta que has creado en tu navegador. Para ello, puedes ir a tu localhost e insertar cualquier ruta que no tengas planteada en tu aplicación. Entonces, si insertas, por ejemplo, la ruta «/error», debería aparecerte el texto «404 | Not Found Page» que hemos definido.
¿Qué sigue?
Ahora que sabes cómo crear una ruta 404 con React Router, ¡es la ocasión ideal para utilizarla y controlar los errores de tus aplicaciones! Para conocer más sobre cómo crear aplicaciones web, no solo con React, sino también con lenguajes de programación como JavaScript, CSS, JSX y HTML, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp. En este programa de formación intensiva, aprenderás todo lo necesario para ser un experto del desarrollo web en pocos meses. ¿A qué esperas para inscribirte? ¡Hazlo ya!
