我很难理解为什么我的服务器会出现水合错误。我尝试使用Link
组件的传统行为,但没有任何效果。我还收到以下错误:
Warning: Expected server HTML to contain a matching <a> in <ul>.
at a
at ul
at div
at div
at div
at nav
at div
at Home (webpack-internal:///./components/Header.js:24:80)
这是否与条件渲染有关?
下面是代码片段,您可以在frontend -> components -> Header
上的https://github.com/Adissuu/Database位置看到完整的文件:
<ul className="items-center justify-center space-y-8 md:flex md:space-x-6 md:space-y-0">
<li className="text-white">
<Link href="/signin" className=' content-center text-white hover:text-forest-200 duration-300'>
Sign In
</Link>
</li>
<li className="text-white">
<Link href="/signup" className='btn bg-forest-100 p-1 content-center rounded-md text-white hover:bg-forest-200 duration-300'>
Sign Up
</Link>
</li>
{isAuth() && (
<a style={{ cursor: 'pointer' }} onClick={() => signout(() => Router.replace(`/signin`))}>
Signout
</a>
)}
</ul>
1条答案
按热度按时间eivgtgni1#
几个小时后,我偶然发现了一个可行的解决办法:为Header禁用SSR。这不是什么大问题,但它有助于通过函数进行条件渲染。
因此在
Header.js
的父代中: