我正在升级Next JS应用程序项目以使用App Router。
layout.js（根布局）有一个Logo组件，将显示在所有路由上。
在RootLayout中，我维护了一个状态变量，以便在子组件请求时立即更新Logo组件的外观（className）。
在过去使用页面路由器时，这可以通过传递函数来设置标记内的状态来实现。
function MyApp({ Component, pageProps }) {
const [isLoading, setIsLoading] = useState(false)
return (
<Logo className={` ${isLoading ? "draw" : ""} ${hideLogo ? "hide" : ""}`}>
<Component {...pageProps} setIsLoading={setIsLoading} />
</Logo>
)
}带有App Router的更新版本看起来像这样：
"use client"
export default function RootLayout({ children }) {
const [isLoading, setIsLoading] = useState(false)
const [hideLogo, setHideLogo] = useState(false)
return (
<html lang="en">
<body className={inter.className}>
<Logo
className={`${isLoading} ? "draw" : ""} ${hideLogo ? "hide" : ""}`}
></Logo>
{children}
</body>
</html>
)
}如何使用更新的App Router来实现相同的功能？
我没有找到任何关于如何实现这一点的文档，但是我认为这种用例有点常见，并且有人可以提出最佳实践方法。
1条答案
按热度按时间6vl6ewon1#
首先，你的布局应该是服务器组件。
如果你在你的组件中使用状态，你需要添加“使用客户端”，这使得它不是一个服务器组件。
我也有类似的问题。
你可以这样做：/一个包含每个路径名信息的对象：
要获得路径，请遵循以下操作：GitHub issue
**注意：**您不需要为每个路由指定，只需要为那些您想要更改默认外观的路由指定。
使用这些值作为徽标url，但始终有一些小写值