React ハイドレーションエラー Hydration Failed

いつものエラー報告ですが、かなり時間が経ってから全て解決しました。

自分の場合aタグでaタグをラップしていたのが原因でした。
再現させたかったら上記の通りHTMLを書けばエラーを出せます。

react-scrollから使うScrollタグは中にaタグを入れるとハイドレーションエラーが起きました。

普通にコーディングしてればpでdivを包むようなことはないので、インポートしているコンポーネントタグに狙いを付けて解消を目指すといいはずです。

エラーが出てた構文

<Scroll to="rule" smooth={true} offset={-20} duration={500}>
	<a>About</a>
</Scroll>

aタグを消して解消した構文

<Scroll to="rule" smooth={true} offset={-20} duration={500}>
	About
</Scroll>

修正後はこのようになります。
なぜエラーの解決に時間がかかったのでしょうか？
カスタムコンポーネントはどこまで内包されてるかわからず、ライブラリまたはモジュール内のルールがありHTMLのルールの規約の範囲外だからです。

HTMLの構文エラーにしか目を向けてなかったのだから当然見つかるわけがないということです。
つまり外部からimportしたタグは属性が何で中に何が入っているかを知る必要があります。

もしこのエラーが出た時は、Reactのバージョンを変えたりせず、aタグがカスタムコンポーネントやライブラリからインポートしたタグが原因でないか、重なってないか確認をし、カスタムコンポーネントの取り扱いには細心の注意を払いましょう。

追記2022/10/3
その後リッチテキストの記述ミスによりpタグの中にcodeブロックが入っていたりiframeがpタグに入っていたりと様々な角度でエラーが起きました。
ただ一貫して言えることはHTMLの記述がおかしいというだけのエラーみたいです。(安心しましょう)