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 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 :

, , ,

Le composant 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 ressort de son nom qu'il ne modifie jamais la route, ce qui est très utile lors du rendu côté serveur.

Composant 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

et 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, route actuelle vers le serveur (car il s'agit du chemin), mais pas (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, 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!