水合失败，因为初始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中间件。去除这个可以消除所有的水合错误。