【Next】路由、页面和布局

小秀_heo

已于 2024-08-11 15:02:16 修改

阅读量464

点赞数 6

分类专栏： React 文章标签： react.js 前端

于 2024-04-11 19:48:16 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/137650689

版权

React 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

项目初始化：

npx create-next-app@latest

定义路由

page.js 文件用于使路径可公开访问。

通俗来说，文件夹 + 该文件夹下的 page.js => 可访问的路由

比如这里的 /dashboard/analytics 就是不可访问的。

还有一个重要特性是：pages 显示路由独有的 UI，layouts 显示跨多个路由共享的 UI。什么意思呢？=> 见页面和布局。

页面和布局

可以在首页通过添加 Head 标签进行 SEO 优化：

<Head>
    <title>我是title</title>
    <meta name="description" content="Generated by create next app" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" href="/favicon.ico" />
</Head>

可以通过从 layout.js 文件导出 React 组件来定义布局。该组件应该接受 children 属性，该属性将在渲染期间填充子布局（如果存在）或子页面。

/app.page.tsx

"use client"
export default function Home() {
  return (
      <h1 className={"text-4xl text-orange-500"}>
        Hello Home Page
      </h1>
  );
}

/app/layout.tsx

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

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}>
      RootLayout
      {children}
      </body>
    </html>
  );
}

根布局在 app 目录的顶层定义并适用于所有路由。此布局使你能够修改从服务器返回的初始 HTML。根布局必须定义 <html> 和 <body> 标签，因为 Next.js 不会自动创建它们。

/app/dashboard/page.tsx

export default function Page() {
    return (
            <h1 className={"text-3xl text-blue-500"}>Hello, dashboard!</h1>
    )
};

/app/dashboard/layout.tsx

import React from "react";

export default function DashboardLayout({children}:{children:React.ReactNode}) {
    return (
        <section>
            DashboardLayout
            {children}
        </section>
    )
};

根布局 (app/layout.js) 将封装仪表板布局 (app/dashboard/layout.js)，仪表板布局 (app/dashboard/layout.js) 将封装路线段在 app/dashboard/* 内。

/app/dashboard/settings/page.tsx

export default function Page() {
    return <h1 className={"text-3xl text-blue-500"}>Hello, dashboard settings!</h1>
}

最顶层的布局称为根布局。此 required 布局在应用中的所有页面之间共享。根布局必须包含 html 和 body 标签。

小秀_heo

关注

6
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
【Next】路由、页面和布局

page.js文件用于使路径可公开访问。通俗来说，文件夹 + 该文件夹下的 page.js => 可访问的路由比如这里的 /dashboard/analytics 就是不可访问的。pages显示路由独有的 UI，layouts显示跨多个路由共享的 UI。什么意思呢？=> 见页面和布局。
复制链接

扫一扫