Que dois-je faire si le routeur React ne s'affiche pas ?

Solution pour réagir au routeur qui ne s'affiche pas : 1. Ajoutez browserRouter au composant de routage parent pour envelopper le routeur ; 2. Utilisez "this.props.history.go()" pour actualiser le composant ; 3. Ajoutez les paramètres du navigateurrouter "forcerefresh=". {true}"; 4. Écrivez la fonction hook dans " " et appelez-la en quittant ou en entrant sur cet itinéraire.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Que dois-je faire si le routeur React ne s'affiche pas ?

react-router-dom a un problème car le composant de saut d'itinéraire n'affiche pas

Scénario

Lorsque vous utilisez la route Sun pour accéder à la route parent, peu importe que vous utilisiez Link to ou this.props.history. pousser pour sauter, la barre d'adresse Url Tout a changé, mais les composants de la page ne peuvent pas être chargés et la page n'est pas actualisée. Cliquez sur Lien vers sur la route parent, même position de saut, l'URL reste inchangée, la page n'est pas actualisée, mais le composant est chargé.

Vérifiez this.props au point de saut et à l'itinéraire cible et constatez que this.props.history est devenu l'itinéraire post-saut après le saut, mais this.props.location correspond toujours à l'itinéraire d'origine. Pour les pages qui chargent normalement les composants, l'historique et l'emplacement sont tous deux le même itinéraire.

Solution

Le blogueur Baidu a essayé diverses méthodes pendant longtemps avant de trouver la vraie raison. Bien sûr, il a également acquis de nombreuses autres méthodes intéressantes.

La vraie raison

est due à l'abus de BrowserRouter dans React-Router-Dom. Le blogueur a appris le routage en regardant des vidéos, il ne connaissait donc pas très bien les fonctionnalités, il a donc ajouté BrowserRouter au routage parent. composant pour inclure tous les routeurs. Ensuite, la route enfant est également liée à la route petit-enfant, j'utilise donc le routeur du navigateur pour envelopper la route enfant et créer un lien vers la route petit-enfant. De cette façon, il n'y a aucun problème pour accéder à la route petit-enfant. au même niveau. Il n'y a aucun problème pour que la route petit-enfant passe à la route enfant. La route petit-enfant saute. La route parent ne peut pas charger le composant. Il n'y a aucun problème pour que la route parent passe à la route enfant et à la route petit-enfant. C'est la caractéristique de cette fosse.

J'estime donc que les informations de routage sont principalement incluses dans le routeur du navigateur. Si le routeur du navigateur est inclus dans la sous-route, les informations du routeur du navigateur de la couche supérieure seront perdues.

Quelques autres méthodes acquises par Baidu

Vous pouvez utiliser this.props.history.go() pour actualiser le composant. Les nombres entre parenthèses go représentent la page précédente et la page suivante. Cette fonctionnalité est actualisée. Il peut être utilisé s’il doit être rafraîchi.

Utilisez la méthode consistant à accéder à une page vierge, puis à revenir en arrière, mais le blogueur l'a essayé et cela n'a pas semblé fonctionner.

Vous pouvez ajouter forcerefresh={true} au paramètre browserrouter. Le blogueur l'a essayé et cela a provoqué l'actualisation de chaque saut d'itinéraire dans le package ci-dessous. Cela peut être utile à des endroits spécifiques.

Vous pouvez également y écrire une fonction hook, qui sera appelée lors de la sortie ou de l'entrée de cet itinéraire. Par exemple, si vous entrez un itinéraire avec des autorisations, vous pouvez ajouter la vérification des autorisations onEnter={myfunc} dans myfunc. Si la vérification ne réussit pas, remplacez this.props.history et passez à l'objectif.

Apprentissage recommandé : "Tutoriel vidéo React"

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!