错误:水化失败是因为初始UI不匹配使用useSession()在服务器上呈现的内容，并且响应引导

Question

我用的是next.js，react18和next-auth。我有一个登录组件，它检查会话并显示一个登录或注销链接，这取决于您是否已登录。

import Link from 'next/link';

const Login = () => {
    const {data: session} = useSession();

    if (session) {
        return <Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Link>
    } else {
        return <Link href="#"><a onClick={() => signIn()}>Log in</a></Link>
        
    }

这曾经像预期的那样工作，但是后来我安装了，我更改了如下链接

import {Nav} from "react-bootstrap";

return <Nav.Link href="#"><a onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;
return <Nav.Link href="#"><a onClick={() => signIn()}>Log in</a></Nav.Link>;

我开始发现这个错误

Error: Hydration failed because the initial UI does not match what was rendered on the server.

我知道我可以降级到反应17或只是使用‘下一个/链接’组件，但我正在寻找一个解决办法之前放弃。

Answer 1

这是因为您引用的是服务器上不存在的window。错误在17岁时也有，但反应18更严格，而且会出错。

Answer 2

我对next.js不太了解，但是renders引导程序的Nav.Link组件已经呈现了anker元素，所以链接中有链接。试着使用以下方法：

<Nav.Link href="#" onClick={() => signOut({callbackUrl: `${window.location.origin}`})}>Sign out</a></Nav.Link>;

我看到你宁愿做一些动作，然后导航。也许您可以尝试在variant=“链接”中使用Button，或者只使用其他的东西来代替锚元素。

你为什么要使用Nav.Link和react引导呢？Nav.Link只添加样式，没有其他任何东西，没有魔力。