Solución:
Este es un problema relacionado con el servidor
Para el servidor Apache:
Asegúrese de que su servidor Apache redirija todas las solicitudes al archivo index.html. Asegúrese de que el siguiente código esté presente en .htaccess
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
Después de quedarse atascado react-router durante un par de días, leí la documentación en React Training. Luego seguí los pasos de inicio rápido y lo modifiqué para satisfacer mis requisitos.
import {
HashRouter as Router,
Route,
} from 'react-router-dom';
<Router>
<div>
<Header />
<Route exact path="https://foroayuda.es/" component={Content} />
<Route path="/:country" component={SnaContent} />
<Footer />
</div>
</Router>
Esto ha solucionado el problema por ahora. Espero que sea útil para otras personas que enfrentaron problemas similares.
Inicialmente tuve un problema similar cuando implementé mi aplicación React en Firebase Hosting.
Resultó que el problema era en realidad no con el enrutador react, como sugiere el póster de la respuesta aceptada. HashRouter agregaría / # / delante de nuestra URL, que no se ve muy bonita, pase lo que pase.
Descubrí que el problema estaba en el servicio de alojamiento web usamos. Necesitaríamos indicar el archivo HTML predeterminado que queremos renderizar, que es el index.html.
Esto sucede porque nuestro proveedor de servicios de alojamiento (ya sea S3 / Apache / Google Cloud Platform (GCP) de Amazon / Firebase Hosting, etc.) no sabe qué archivo HTML representar si se proporcionó una URL que no sea la predeterminada (https://www.link_to_your_website.com). Por ejemplo, no podrá reconocer https://www.link_to_your_website.com/login.
En Firebase Hosting, deberá hacer lo siguiente:
"rewrites": [ {
"source": "**",
"destination": "/index.html"
}]
En el .htaccess de Apache, deberías hacer:
FallbackResource /index.html
Fuente: ¿Cómo redirigir un error 404 a la página de inicio con .htaccess?
Estos comandos les dirán que rendericen index.html pase lo que pase porque React-Route actualizará dinámicamente el árbol del DOM de HTML con los nuevos React Elements.
Espero que aquellos que enfrentaron este problema similar lo encuentren útil.