NextJS 13 root.layout 在底部渲染 NavBar。有没有办法一致地将导航栏渲染在顶部？
Jes*_*key 2 layout routes reactjs server-side-rendering next.js
我正在尝试构建 Next13 应用程序。新的布局很酷，但它扰乱了渲染。我不完全理解布局中渲染对象的顺序：
导航栏.tsx
"use client";
import Link from "next/link";
export default () => {
return (
<span className="flex justify-between">
<h1 className="text-xl">Navigation Bar</h1>
<ul className="flex gap-4">
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/user/login">Login</Link>
</li>
<li>
<Link href="/user/signup">Sign Up</Link>
</li>
</ul>
</span>
);
};
布局.tsx
import "./globals.css";
import NavBar from "./NavBar";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html className="bg-slate-500 font-robslab" lang="en">
<head>
<title>Stylitique</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</head>
<header>
<NavBar />
</header>
<body>{children}</body>
</html>
);
}
page.tsx（主页）
export default function Home() {
return (
<main>
<h1 className="text-green-500">HOME</h1>
<p>
{" "}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
sapiente, expedita praesentium a eligendi dolorem maiores nihil
consectetur ipsum, repudiandae sed deserunt delectus, facere repellat
ipsam sit possimus voluptatibus error!
</p>
</main>
);
}
我试过：
- 将导航栏放入正文外部的标题中。
- 直接将其放入体内。
- 有和没有“使用客户端”。
- 我想，向“HOME”添加更多数据是为了减慢渲染速度。
有人找到解决方案了吗？
只需将组件放入其中即可<body>
注意：不需要
<header>
<head>
...
</head>
<body>
<NavBar />
{children}
</body>
| 归档时间： |
|
| 查看次数： |
3850 次 |
| 最近记录： |