4
章节4
创建布局和页面
到目前为止，您的应用程序只有一个主页。让我们学习如何使用**布局**和**页面**创建更多路由。
在本节中…
以下是我们涵盖的主题
使用文件系统路由创建dashboard路由。
了解创建新路由段时文件夹和文件的作用。
创建一个可以在多个仪表板页面之间共享的嵌套布局。
了解什么是同址、部分渲染和根布局。
嵌套路由
Next.js 使用文件系统路由，其中**文件夹**用于创建嵌套路由。每个文件夹代表一个**路由段**，对应于一个**URL段**。
您可以使用layout.tsx和page.tsx文件为每个路由创建单独的UI。
page.tsx是 Next.js 的一个特殊文件，它导出一个 React 组件，并且它是路由可访问的必要条件。在您的应用程序中，您已经有一个页面文件：/app/page.tsx - 这是与路由/关联的主页。
要创建嵌套路由，您可以在彼此内部嵌套文件夹，并在其中添加page.tsx文件。例如
/app/dashboard/page.tsx与/dashboard路径关联。让我们创建该页面看看它是如何工作的！
创建仪表板页面
在/app内部创建一个名为dashboard的新文件夹。然后，在dashboard文件夹内创建一个新的page.tsx文件，内容如下
export default function Page() {
return <p>Dashboard Page</p>;
}现在，确保开发服务器正在运行并访问https://127.0.0.1:3000/dashboard。您应该会看到“仪表板页面”文本。
这就是您在 Next.js 中创建不同页面方法：使用文件夹创建一个新的路由段，并在其中添加一个page文件。
通过为page文件命名，Next.js 允许您同址UI 组件、测试文件以及与您的路由相关的其他代码。只有page文件内部的内容才能公开访问。例如，/ui和/lib文件夹与您的路由一起同址位于/app文件夹中。
练习：创建仪表板页面
让我们练习创建更多路由。在您的仪表板中，创建另外两个页面
- **客户页面**：该页面应可在https://127.0.0.1:3000/dashboard/customers访问。目前，它应该返回一个
<p>客户页面</p>元素。 - **发票页面**：发票页面应可在https://127.0.0.1:3000/dashboard/invoices访问。目前，也返回一个
<p>发票页面</p>元素。
花些时间解决此练习，准备好后，展开下面的切换查看解决方案
创建仪表板布局
仪表板具有一些在多个页面之间共享的导航。在 Next.js 中，您可以使用特殊的layout.tsx文件来创建在多个页面之间共享的 UI。让我们为仪表板页面创建一个布局！
在/dashboard文件夹内，添加一个名为layout.tsx的新文件，并粘贴以下代码
import SideNav from '@/app/ui/dashboard/sidenav';
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
<div className="w-full flex-none md:w-64">
<SideNav />
</div>
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
</div>
);
}此代码中发生了一些事情，让我们分解一下
首先，您将<SideNav />组件导入到您的布局中。您在此文件中导入的任何组件都将成为布局的一部分。
<Layout />组件接收一个children属性。此子元素可以是页面或另一个布局。在您的情况下，/dashboard内部的页面将自动嵌套在<Layout />内部，如下所示
通过保存更改并检查您的本地主机来检查一切是否正常工作。您应该会看到以下内容
在 Next.js 中使用布局的一个好处是在导航时，只有页面组件会更新，而布局不会重新渲染。这称为部分渲染
根布局
在第 3 章中，您将Inter字体导入到另一个布局中：/app/layout.tsx。提醒一下
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={`${inter.className} antialiased`}>{children}</body>
</html>
);
}这称为根布局，是必需的。您添加到根布局中的任何 UI 都将在您的应用程序中的**所有**页面之间共享。您可以使用根布局修改您的<html>和<body>标签，并添加元数据（您将在后面的章节中了解更多关于元数据的信息）。
由于您刚刚创建的新布局（/app/dashboard/layout.tsx）是仪表板页面独有的，因此您无需在上面的根布局中添加任何 UI。
这有帮助吗？