我在 Nextjs（应用程序路由器）中有一个简单的根布局，它呈现导航栏及其下面的子项。
根布局
import "./globals.css";
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Russo_One } from "next/font/google";
import Navbar from "./_components/Navbar";
export const russo = Russo_One({ weight: "400", subsets: ["latin"] });
const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Sportly",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>
<Navbar />
{children}
</body>
</html>
);
}
在文档中，它指出...
布局是在多个页面之间共享的 UI。在导航上， 布局保留状态，保持交互性，并且不重新渲染。 布局也可以嵌套
所以，我很困惑为什么会发生这种情况。我只是注意到它，因为我导入了 Google 字体并在导航栏中使用了它。但是，当我更改页面时，字体粗细会重置一秒钟，然后重新出现。有人可以帮助我理解为什么会发生这种情况吗？
导航栏组件
import { Link, Typography, Box } from "@mui/material";
import { russo } from "../layout";
export default function Navbar() {
console.log("navbar rendering...");
return (
<nav className="/*STYLES*/">
<h1 style={{fontWeight: "400" /* STYLES*/}} className={russo.className}>
SPORTLY
</h1>
</nav>
);
}
如果没有 stackblitz 副本或其他东西，很难调试，但我会
检查是否确实是重新渲染问题。
https://jsramblings.com/how-to-check-if-your-component-rerendered-and-why/
如果不是重新渲染，只是js注入css的问题，可以考虑按照这里推荐的方式加载字体：
https://nextjs.org/blog/next-10-2#automatic-webfont-optimization
我在重新渲染共享布局时遇到了同样的问题，并通过使用
Linknext/link@mui/material