nous utilisons react-roucter-dom avec http-server , lorsque l'utilisateur charge la page principale et clique sur les liens de navigation, les nouvelles pages se chargent parfaitement, mais lorsque l'utilisateur actualise la page dans cet itinéraire, il renvoie 404.
Cela signifie que HTML5 pushState ne fonctionne pas avec http-server .
exemple:
<Router>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topics} />
</Router>
Si l'utilisateur accède à / about et actualisez-la, une erreur 404 se produira
Y a-t-il un moyen de résoudre ce problème?
3 Réponses :
Votre erreur se produit car votre application est une application à page unique, ce qui signifie que l'intégralité des données de votre site est chargée sur la route / . Ce qui signifie que si vous essayez d'accéder à une autre page sans avoir préalablement chargé le site via la route / , cela échouera.
Tyler McGinnis a un très bon article de blog sur le différentes manières de résoudre ce problème.
Ma question concerne le http-server avec react-router
Votre problème est dû au fait que votre bundle React n'est disponible sur aucun itinéraire autre que l'itinéraire / . Vous devez configurer votre serveur pour qu'il serve '/' comme route de secours.
Vous devez utiliser d'autres packages prenant en charge l'API d'historique HTML5 comme http-server-spa < / a> au lieu de http-server .
Utilisez ceci lorsque vous exécutez http-server:
npm run serveprod
Il redirige toutes les demandes d'erreur qu'il ne peut pas gérer vers index.html où réside votre configuration react-router. Si toutes les requêtes arrivent sur cette page, le react-router s'occupe du routage en interne.
Au fait, j'ai construit un petit script dans package.json - scripts, pour appeler tout cela et servir le dossier de construction comme ceci:
scripts: {
...
"serveprod": "npm run build && http-server --proxy http://localhost:8080? ./build"
...
}
Et lancez simplement:
http-server --proxy http://localhost:8080? ./build