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

5vf7fwbs 于 2023-05-28 发布在 React

关注(0)|答案(3)|浏览(185)

我正在使用next.js，react 18和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.

我知道我可以降级到React17或只是使用‘下一个/链接‘组件，但我正在寻找一个变通办法之前给予。

reactjs

来源：https://stackoverflow.com/questions/71847117/error-hydration-failed-because-the-initial-ui-does-not-match-what-was-rendered

3条答案

按热度按时间

csga3l581#

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

赞(0）回复(0）举报 2023-05-28

byqmnocz2#

我对next.js了解不多，但是react-bootstrap的 Nav.Link 组件已经呈现了anker元素，所以你在一个链接中有了link。尝试使用以下方法：

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

我看到你宁愿做一些行动，而不是导航。也许你可以尝试使用 Button 和 variant=“link”，或者只是使用其他东西来代替锚元素。
你为什么要使用Nav.Link和react-bootstrap？链接只添加样式，没有其他的，没有魔法。

赞(0）回复(0）举报 2023-05-28

khbbv19g3#

在这里加上我的2美分，我正在使用Gatsby，这个错误出现了，因为我在服务器端没有呈现任何东西，但在客户端我返回了一个元素，像这样：

export default function MyCustomCanvasAnimation() {
  const isSSR = typeof window === "undefined";

  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    if (isSSR) return;

    const canvas = canvasRef.current;

    if (!canvas) return;

    let animationFrameId: number

    function render() {
      animationFrameId = window.requestAnimationFrame(() => { .... })
    }

    render();

    return () => {
      window.cancelAnimationFrame(animationFrameId);
    };
  }, [canvasRef, mousePosition]);

  // This line was causing the error
  if (isSSR) return <></>;

  return <canvas ref={canvasRef} />;
}

赞(0）回复(0）举报 2023-05-28

我来回答

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

3条答案

相关问题

热门标签

最新问答