我正在使用Next.js 13 beta（应用程序目录），并试图根据URL路径动态更改我的根布局中的导航栏（导航栏元素将包括.../posts中的文本“posts”和.../profile中的“profile”）。
export default function RootLayout({
children,
params,
}: {
children: React.ReactNode;
params: { pathName: string };
}) {
return (
<html lang="en">
<body>
<Navbar pathName={params.pathName} />
{children}
</body>
</html>
);
}基于this页面，你可以有一个params参数，但它不包括页面url。此外，布局不会重新呈现，所以我很困惑，我怎么能做到这一点干净。谢谢。
2条答案
按热度按时间j2datikz1#
我没有尝试从布局向Navbar元素传递参数，而是直接在Navbar组件中使用usePathname钩子。
nwsw7zdq2#
您需要使用
useRouter钩子来获取正确的pathName，因为传入布局组件的paramsprop将仅包含动态路由参数，并且不会在大多数页面过渡中重新呈现以提高性能。如果你想让它保持非客户端，你可以为每一组你想让导航栏不同的url设置组路由布局，但是这样你可能会有一些重复的代码。