Pourquoi est-ce que j'obtiens une erreur « Échec de l'hydratation » lors de l'initialisation d'un projet à l'aide de la pile indépendante de Remix dans Devtools ?
P粉476475551
2023-08-30 00:12:22
<p>Lorsque j'apprenais Remix, j'ai initialisé un projet selon le tutoriel, mais lorsque j'ai ouvert Devtools, j'ai constaté que plusieurs erreurs étaient signalées dans la console. </p><p>
<code>Avertissement : Le HTML du serveur contenant des balises <div> dans <html> </code></p><p>
<code>Erreur : l'hydratation a échoué car l'interface utilisateur initiale ne correspond pas à ce qui est affiché sur le serveur. </code>*n</p><p>
Le plus ridicule est que j'ai ouvert la page d'accueil de Remix, et sa page d'accueil a également signalé la même erreur, j'étais donc particulièrement curieux de savoir si l'hydratation avait réussi et pourquoi cette erreur s'était produite. </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Il s'agit d'un problème React bien connu causé par des extensions de navigateur modifiant le DOM.
est plus évident dans Remix car il restitue l'intégralité du
<html />，而不仅仅是<div id="root" />.Vous pouvez confirmer si une extension de navigateur en est la cause en utilisant un profil de navigateur sans l'extension installée (ou en mode navigation privée).
Kiliman présente une solution de contournement ici : https://github.com/kiliman/remix-hydration-fix, qui implique le rendu de l'en-tête et de l'application séparément.