从零开始NEXT.js(三)——layout.tsx的用法

最新推荐文章于 2024-08-08 16:33:07 发布

Arthus_wyk

最新推荐文章于 2024-08-08 16:33:07 发布

阅读量2.5k

点赞数 24

分类专栏： NEXT.js 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Arthus_wyk/article/details/140343737

版权

NEXT.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

从零开始NEXT.js(二)——项目结构和新建页面

上一篇中我们介绍了NEXT.js项目的基本结构和如何去新建一个页面。这篇我们来重点介绍一下layout.tsx这个文件的主要用法。

layout.tsx在本质上是在组件之间共享UI。当我们要创建一个导航栏、侧边栏或者是一个每个页面都有显示的UI时，我们可以把这一部分UI写在layout.tsx中。

children代表了我们的所有页面，在此之上，我们可以在所有页面上添加一个导航栏。

在layout.tsx中添加以下代码，做一个简单的导航栏

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import Link from "next/link";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <nav>
          <ul className="flex gap-2 justify-between px-4 bg-blue-700">
            <li>
              <Link href={'/'}>Home</Link>
            </li>
            <Link href={'/about'}>About</Link>
          </ul>
        </nav>
        {children}
        </body>
    </html>
  );
}

运行后效果如下：

点击导航栏上的字能完成简单的页面跳转

如果我想要让特定的目录下的所有页面加上特定的共同的UI，可以在对应目录下创建一个layout.tsx。

在about目录下新建一个layout.tsx，加上以下代码

export default function Aboutlayout({
    children
}:{
    children:React.ReactNode
}){
    return(
        <div>
            <div className="h-24 w-full bg-blue-900">
                <h1 className="text-while text-2xl">About</h1>
            </div>
            {children}
        </div>
    )
}

效果如下

Arthus_wyk

关注

24
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
从零开始NEXT.js(三)——layout.tsx的用法

layout.tsx在本质上是在组件之间共享UI。当我们要创建一个导航栏、侧边栏或者是一个每个页面都有显示的UI时，我们可以把这一部分UI写在layout.tsx中。上一篇中我们介绍了NEXT.js项目的基本结构和如何去新建一个页面。如果我想要让特定的目录下的所有页面加上特定的共同的UI，可以在对应目录下创建一个layout.tsx。children代表了我们的所有页面，在此之上，我们可以在所有页面上添加一个导航栏。在layout.tsx中添加以下代码，做一个简单的导航栏。
复制链接

扫一扫