Exemple de tutoriel sur la façon dont le serveur coopère avec BrowserRouter sous React-Router 4.0

react-router joue un rôle important dans les projets React en tant que solution de routage du framework React. 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. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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 peut être vu d'après 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 front-end. La différence est que le premier est basé sur le segment de nom de chemin de rul et le segment de nom de chemin. 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-niveaux, 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, mais après. redirection, le js packagé par webpack Le fichier 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.

Recommandations associées :

Une brève discussion sur la façon d'utiliser le HashRouter et le BrowserRouter de React-Router

Historique du navigateur de React-Router rafraîchir Comment résoudre le problème de la page 404

Trois types de Vue-Router pour réaliser le saut entre les composants

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!