页面设置
Next.js 使用基于文件系统的路由器，其中使用文件夹来定义路由。 每个文件夹代表一个映射到URL段的路由段。要创建嵌套路由，可以将文件夹相互嵌套。
我们需要知道一下几点：
-
页面始终是路由子树的叶子。 -
页面扩展名可以是.js、.jsx、 或.tsx -
默认情况下，页面是服务器组件，但可以设置为客户端组件
例如，配置/users路由，需要在app目录下创建users目录而不是文件。然后在users目录下创建page.tsx文件。对于 TypeScript，文件名应为 page.tsx 或 page.ts；对于 JavaScript，文件名应为 page.jsx 或 page.js。
如下代码：
//app/users/page.tsx
export default function UsersPage() {
return (
<h2>Hello User1</h2>
)
}
访问：http://localhost:3000/users
如果我们在users目录下创建其他名字的文件，我们通过路由直接访问，是不能访问到的，这就是我们的app router 和page router 的区别。
布局
layout.tsx是与布局相关的文件，而在App Router中，直接保存在app目录下的layoutx.tsx文件会应用于所有page.tsx。
layout.tsx是根布局文件，是必须的，根布局必须定义<html>和<body>标签，因为 Next.js 不会自动创建它们。
嵌套布局
我们可以在users目录下面创建一个layout.tsx，该组件应该接受一个children，该 prop 将在渲染期间填充子布局（如果存在）或子页面。
//app/users/layout.tsx
import React from "react";
export default function UsersLayout({children}: {
children: React.ReactNode
}) {
return (
<section>
<div>导航</div>
{children}
</section>
)
}
当我们访问：http://localhost:3000/users时，就会有以下效果
嵌套布局 就是在一个文件夹内定义的布局（例如 app/dashboard/layout.js）适用于特定的路由段（例如 acme.com/dashboard），并在这些段处于活动状态时进行渲染。默认情况下，文件层次结构中的布局是嵌套的，这意味着它们通过其 children 属性包装子布局。
这里你可以在users目录下面创建其他页面目录，比如创建app/users/info/目录，然后在info目录下创建page.tsx和layout.tsx。当访问info时，users目录和跟目录的layout.tsx，都会被应用到。
在 Next.js 中使用布局的好处之一是，在导航时，只有页面组件会更新，而布局不会重新呈现，这称为部分渲染。
原文始发于微信公众号（大前端编程教学）：页面设置和布局以及嵌套布局
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224431.html
