Comment BrowserRouter coopère avec le serveur React-Router

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 a7f2cf15f06fbef780c6b2609731da81 couramment utilisé dans les versions 2.0 et 3.0 n'est plus couramment utilisé comme composant de configuration de routage sous-jacent. Au lieu de cela, il existe quatre composants de routage différents :

6177ae8eed0322e277a7e6c21878d6d7, 4915f05e1fd45774514682b289f54a27, ab736354b76d127562077b87d19fcb68, 918422798e26d25f6fed3e9f4a3226eb

Le composant ab736354b76d127562077b87d19fcb68 les informations « URL » ne modifient pas la barre d'adresse du navigateur et sont souvent utilisées dans des environnements non-navigateurs tels que React Native ou des environnements de test.

Le composant 918422798e26d25f6fed3e9f4a3226eb ressort de son nom qu'il ne modifie jamais la route, ce qui est très utile lors du rendu côté serveur.

Composant 4915f05e1fd45774514682b289f54a27 Le composant de routage que nous connaissons le mieux n'a pas besoin d'être décrit en détail. Ici, je vais parler des pièges que j'ai rencontrés lors de l'utilisation du composant 6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7

6177ae8eed0322e277a7e6c21878d6d7 et 4915f05e1fd45774514682b289f54a27 peuvent tous deux implémenter des fonctions de routage frontal. La différence est que le premier est basé sur le segment de nom de chemin de rul et le segment de chemin d'accès. ce dernier est basé sur le segment de hachage.

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, 6177ae8eed0322e277a7e6c21878d6d7 route actuelle vers le serveur (car il s'agit du chemin), mais pas 4915f05e1fd45774514682b289f54a27 (car il s'agit d'un segment de hachage).

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, e39972b58835f779f5cb270543abb76e peut être utilisé à la place dans les navigateurs.

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!