水合失败，因为初始 UI 与服务器上呈现的内容不匹配。 React 18，下一个链接，我的按钮组件出错？

Question

这是我的自定义按钮组件：

const variants = {
  primary: "btn-primary",
  secondary: "btn-secondary",
  delete: "btn-red",
  white: "btn-white",
  none: "",
};

type IconProps =
  | { startIcon: React.ReactElement; endIcon?: never }
  | { endIcon: React.ReactElement; startIcon?: never }
  | { endIcon?: undefined; startIcon?: undefined };

export type ButtonProps = React.ButtonHTMLAttributes<
  HTMLButtonElement | HTMLAnchorElement
> & {
  variant?: keyof typeof variants;
  isLoading?: boolean;
  asAnchor?: boolean;
} & IconProps;

export const Button = React.forwardRef<
  HTMLButtonElement | HTMLAnchorElement,
  ButtonProps
>(
  (
    {
      type = "button",
      className = "",
      variant = "primary",
      isLoading = false,
      startIcon,
      endIcon,
      asAnchor,
      ...props
    },
    ref
  ) => {
    return (
      <>
        {asAnchor ? (
          <a
            className={clsx(
              className,
              variants[variant],
              "appearance-none",
              props.disabled && "pointer-events-none opacity-90"
            )}
            {...props}
          >
            {!isLoading && startIcon}
            {!isLoading && props.children}
            {!isLoading && endIcon}
          </a>
        ) : (
          <button
            type={type}
            className={clsx(
              className,
              variants[variant],
              "disabled:pointer-events-none disabled:opacity-60"
            )}
            {...props}
          >
            {isLoading && (
              <span className="flex items-center justify-center space-x-2">
                <Spinner />
                <span>Loading</span>
              </span>
            )}
            {!isLoading && startIcon}
            {!isLoading && <>{props.children}</>}
            {!isLoading && endIcon}
          </button>
        )}
      </>
    );
  }
);

Button.displayName = "Button";

如果我想渲染

<a>

但使用按钮的样式，我可以将它与

next/link

一起使用，我将像这样使用它：

<Link passHref href="/login">
  <Button className="text-xs" asAnchor>
    Login
  </Button>
</Link>

我收到控制台日志，例如：

Expected server HTML to contain a matching <svg> in <a>.

注释掉上面的链接可以消除错误，所以我确信问题出在我如何呈现链接上。

在

react 17

中很好，但在

react 18

中，我遇到了这个错误。

Answer 1

我发现实际上是我的状态管理破坏了一切，尽管它已经运行了很长一段时间。

我使用

zustand

并且正在使用

persist

中间件。删除这个使得所有水合错误消失。