Cet article présente principalement l'explication détaillée de la façon dont le serveur coopère avec BrowserRouter sous React-Router 4.0. Maintenant, je le partage avec vous et le donne comme référence.
react-router joue un rôle important dans les projets React en tant que solution de routage de framework React.
Dans la version 4.0 de React-Router, l'API a été considérablement modifiée par rapport à la version précédente. Le composant
Le composant
Le composant
Composant
Le premier : http://127.0.0.1:3000/article/num1
Le second : http://127.0.0.1:3000/#/article/num1 (Ce n'est pas nécessairement le cas, mais # est indispensable)
Le problème direct causé par cette différence est que lorsqu'il est dans l'état de routage de deuxième niveau ou multi-niveau, actualisez la page,
Nous ne voulons certainement pas que les routes frontend soient envoyées au backend.
Il y a ce passage dans la documentation de React-Router 4.0 :
Remarque : L'utilisation du hachage pour enregistrer l'historique de navigation ne prend pas en charge location.key et location.state. Dans les versions précédentes, nous fournissions des cales pour ce comportement, mais il restait certains problèmes que nous ne pouvions pas résoudre. Tout code ou plugin qui repose sur ce comportement ne fonctionnera pas correctement. Étant donné que cette technologie est uniquement conçue pour prendre en charge les navigateurs existants,
Cela nécessite que le serveur coopère avec le front-end pour apporter quelques modifications simples.
L'idée de la modification est de recharger le fichier html d'entrée (mon background est nodejs) lorsque l'url demandée n'est pas fonctionnelle, mais une route front-end.
// catch 404 and forward to error handler app.use(function(req, res, next) { //判断是主动导向404页面,还是传来的前端路由。 //如果是前端路由则如下处理 fs.readFile(__dirname + '/public/dist/index.html', function(err, data){ if(err){ console.log(err); res.send('后台错误'); } else { res.writeHead(200, { 'Content-type': 'text/html', 'Connection':'keep-alive' }); res.end(data); } }) });
Il y a d'innombrables pièges ici. Après avoir recherché des méthodes sur Internet, je suis passé à nginx et j'ai utilisé le champ try_files pour diriger vers l'entrée html. Cependant, après redirection, le fichier js empaqueté par webpack. n'a pas été exécuté.
Lors de la vérification de Firebug, j'ai trouvé que "Connection": "keep-alive" est défini dans l'en-tête de réponse de cette actualisation ;
Je pense que le problème devrait être ici, passez à nodejs et utiliser le statut 200 pour correspondre au maintien en vie a vraiment résolu le problème.
L'actualisation de la page sous le routage multi-niveaux React-Router 4.0 ne provoquera plus 404, mais sauvegardera l'état du front-end.
Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.
Articles associés :
Problèmes d'erreur de ressources inter-domaines de React Native
Installation de la dernière version de npm dans nodejs (tutoriel détaillé)
Comment implémenter la fonction anti-rebond dans js (tutoriel détaillé)
Comment marquer la position de défilement de l'enregistrement dans vue-scroller
Que dois-je faire si l'applet WeChat échoue à l'examen ?
Comment modifier le contenu coulissant à l'aide de swiper (tutoriel détaillé)
Comment implémenter une page de connexion vidéo en arrière-plan à l'aide de Vue.js 2.0
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!