错误：水化失败，因为初始 UI 与使用 useSession() 和 react-bootstrap 在服务器上呈现的内容不匹配答案

【问题标题】：Error: Hydration failed because the initial UI does not match what was rendered on the server with useSession() and react-bootstrap错误：水化失败，因为初始 UI 与使用 useSession() 和 react-bootstrap 在服务器上呈现的内容不匹配
【发布时间】：2022-08-20 10:00:15
【问题描述】：

我正在使用 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>
        
    }

这曾经按预期工作，但后来我安装了 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 或仅使用 \'next/link\' 组件，但我正在寻找一种解决方法，然后放弃。

您是否总是收到此错误消息？即使您不使用单个 react-bootstrap 组件？
不，仅当我包含上述内容时。
我下面的回答有帮助吗？
@IgorGonak 不抱歉，我试过但没有运气。不管怎么说，还是要谢谢你。
当您使用react-bootstrap 时，您能否分享该组件的完整代码？

标签： javascript reactjs next.js react-bootstrap

【解决方案1】：

我不太了解 next.js，但是 react-bootstrap 的导航链接组件已经呈现了一个 anker 元素，因此您在链接中有链接。尝试使用以下内容：

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

我看到你宁愿做一些动作然后导航。也许你可以尝试使用按钮和变体=“链接”或者只是使用其他东西而不是锚元素。

你为什么要使用 Nav.Link 和 react-bootstrap？ Nav.Link 只添加样式，没有别的，没有魔法。

【讨论】：

【解决方案2】：

这是因为您引用了服务器上不存在的window。错误也出现在 17 中，但 React 18 更严格，并且会出错。

【讨论】：

window.location 在锚点的 onClick 回调中访问，该回调在客户端的用户操作上执行。它永远不会在服务器上运行。即使是这样，错误也会有所不同。