Soy bastante nuevo para reaccionar y tengo una comprensión básica de cómo funciona. Usando el paquete react-router-dom , tengo una página de inicio configurada con 3 enlaces que conducen a /about , /post y /account . Todo funciona como se esperaba al visitar la página de inicio y hacer clic en cada uno de estos enlaces.
El problema que encuentro es intentar cargar una página yendo directamente a la URL de las páginas. Por ejemplo, escribir www.xxx.com/about cargará una página 404. Como mencioné anteriormente, cargar la página de inicio y hacer clic en el enlace Acerca de funcionará perfectamente bien, pero probar la ruta URL de la página Acerca de no funcionará. ¿Por qué sucede esto y hay alguna forma de solucionarlo?
Cuando navega a través de React Router, suceden dos cosas:
La idea es que cuando creas una página desde cero, tienes que cargar la aplicación React desde el servidor, pero cuando navegas de una página a otra, todo se maneja del lado del cliente (excepto quizás para las llamadas a la API para obtener datos).
Su problema es que no ha hecho nada para que el servidor admita esa ruta, por lo que cuando la primera página que carga un navegador (incluida la actualización o la apertura de un enlace en una nueva ventana) no es la página de inicio, aparece un error 404 en su lugar.
Hay algunos enfoques básicos para hacerlo.
Configure su servidor para que cualquier solicitud de una ruta que deba ser manejada por React Router sirva el documento HTML que arranca su documento HTML.
Actualmente solo tiene (probablemente) la ruta / servir ese documento.
Esto tiene un par de desventajas:
Si bien no recomiendo este enfoque, aquí hay una pregunta sobre cómo configurar Apache HTTPD para hacer esto. Otros servidores HTTP necesitarán configuraciones específicas para ellos.
Puede evitar que las URL de sus rutas apunten a diferentes rutas en el servidor cambiando el identificador de fragmento en la URL en lugar de la ruta .
Esto se hace usando <HashRouter> en lugar de <BrowserRouter> .
Hashbangs fue el enfoque utilizado por los SPA antes de la introducción de pushState y amigos por parte de los navegadores.
Esto evita romper errores 404.
Produce una versión del documento de arranque de React adaptado para cada ruta.
Este es el enfoque utilizado por Gatsby que lo hace bastante fácil.
Esto hace lo mismo, pero en lugar de crear un gran archivo de documentos HTML estáticos que deben reemplazarse cuando realiza actualizaciones, genera los documentos con un enfoque del lado del servidor bastante tradicional.
Next.js adopta este enfoque y, nuevamente, lo hace bastante fácil. Sin embargo, necesita un alojamiento más especializado que el que necesita para archivos estáticos simples.