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 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 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 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 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, 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, 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!