javascript - 错误 : Hydration failed because the initial UI does not match what was rendered on the server with useSession() and react-bootstrap

Question

我正在使用 next.js、react18 和 next-auth。我有一个登录组件，用于检查 session 并显示登录或注销链接，具体取决于您是否登录

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>
        
    }

这曾经按预期工作，但后来我安装了 react-bootstrap，我改变了这样的链接

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

我对 next.js 了解不多，但是 react-bootstrap 的 Nav.Link 组件已经渲染了一个 anker 元素，所以你在链接中有链接。尝试使用以下内容:

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

我看到你宁愿做一些 Action 然后导航。也许您可以尝试将 Button 与 variant="link"一起使用，或者只使用其他东西而不是 anchor 元素。
你为什么要使用 Nav.Link 和 react-bootstrap？ Nav.Link 只添加样式，没有别的，没有魔法。