Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado.
Cree una página 404 personalizada utilizando una ruta React simple para brindar a sus visitantes una experiencia útil cuando más la necesitan.
Tarde o temprano, un usuario visitará una URL que no existe en su sitio web. Lo que haga el usuario después de esto depende de usted.
Es posible que presionen el botón Atrás y abandonen su sitio. En su lugar, puede proporcionar una página 404 útil para ayudarlos a continuar navegando a su sitio web.
Para los sitios web de React, puede usar el enrutador React para crear una página 404 no encontrada útil.
Crear una página 404
El error 404 ocurre cuando intenta visitar una página en un sitio web que el servidor no puede encontrar. Como desarrollador, manejar errores 404 significa crear una página que el servidor usa como reemplazo cuando no puede encontrar la página solicitada.
En React, haces esto creando un componente no encontrado que se renderizará en rutas que no existen.
Este artículo asume que ya tiene una aplicación React en funcionamiento con configuración de enrutamiento. si no lo haces, crear una aplicación React y luego instalar Reaccionar enrutador.
Cree un nuevo archivo llamado NotFound.js y agregue el siguiente código para crear la página 404.
importar { Enlace } de "reaccionar-router-dom";
exportarpor defectofunciónExtraviado() {
devolver (
<división>
<h1>¡Ups! Pareces estar perdido.</h1>
<pag>Aquí hay algunos enlaces útiles:</pag>
<Enlace a ='/'>Hogar</Link>
<Enlace a ='/blog'>Blog</Link>
<Enlace a ='/contact'>Contacto</Link>
</div>
)
}
Esta página 404 muestra un mensaje y enlaces para redirigir a un usuario a páginas comunes en el sitio web.
Enrutamiento a la página 404
Puede crear una ruta normal usando el enrutador React como este:
importar { Ruta, Rutas } de "reaccionar-router-dom";
funciónaplicación() {
devolver (
<Rutas>
<Ruta ruta ="/" elemento={ <Hogar/> }/>
</Routes>
)
}
Usted especifica la ruta de la URL y el elemento que desea representar en esa ruta.
La página 404 muestra las rutas que no existen en el sitio web. Entonces, en lugar de especificar la ruta, use un asterisco (*).
<Ruta ruta ='*' elemento={<Extraviado />}/>
Usando * representa el componente NotFound para todas las URL no especificadas en las rutas.
Enrutamiento en React
Puede crear fácilmente una página 404 para todas las URL que no existen en su aplicación web React utilizando un enrutador.
Los navegadores tienen una página 404 predeterminada, pero crear una personalizada le permite decirles a sus usuarios qué salió mal y cómo pueden solucionarlo. También puede crear una página 404 que se ajuste a su marca.