警告:Prop ' className '在NextJs项目和classnames包中不匹配

Question

嗨，我得到一个错误警告:Prop "className" did not match在我相信下面的代码某处。我正在使用NextJs和CSS模块和'classnames'包。有什么想法吗?

完整的错误是Warning: Prop "className" did not match. Server: "Nav_nav__item__1iofp" Client: "Nav_nav__item__1iofp Nav_nav__itemActive__3cmo3"

是否与classnames包允许在router.asPath === link.path时添加两种样式有关?

{Links.map((link, i) => {
return (
<li
key={i}
className={
router.asPath === link.path
? cx(
styles.nav__item,
styles.nav__itemActive
)
: styles.nav__item
}>
<Link href={link.path}>{link.name}</Link>
</li>
);
})}

Answer 1

对于这个问题，

我用下面的代码创建了一个NoSSr.js文件

import dynamic from "next/dynamic";
const NoSsr = ({ children }) => <>{children}</>;
export default dynamic(() => Promise.resolve(NoSsr), { ssr: false });

用NoSsr标签包装你的layout.js/page.js/index.js

<NoSsr>
<Header />
<Container maxW={"8xl"}>
<main>{children}</main>
</Container>
<Footer />
</NoSsr>

Answer 2

开发者的建议

。删除。next build文件夹

B。重启服务器

如何使用className

<p className={styles.description}>Hello</p>