页面

页面是路由特有的 UI。你可以通过默认从 page.js 文件导出组件来定义页面。

¥A page is UI that is unique to a route. You can define a page by default exporting a component from a page.js file.

例如，要创建 index 页面，请在 app 目录中添加 page.js 文件：

¥For example, to create your index page, add the page.js file inside the app directory:

// `app/page.tsx` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

// `app/page.js` is the UI for the `/` URL
export default function Page() {
  return <h1>Hello, Home page!</h1>
}

然后，要创建更多页面，请创建一个新文件夹并在其中添加 page.js 文件。例如，要为 /dashboard 路由创建页面，请创建一个名为 dashboard 的新文件夹，并在其中添加 page.js 文件：

¥Then, to create further pages, create a new folder and add the page.js file inside it. For example, to create a page for the /dashboard route, create a new folder called dashboard, and add the page.js file inside it:

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

// `app/dashboard/page.js` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

很高兴知道：

¥Good to know:

• .js、.jsx 或 .tsx 文件扩展名可用于页面。

  ¥The .js, .jsx, or .tsx file extensions can be used for Pages.

• 一页始终是 leaf 的 路由子树。

  ¥A page is always the leaf of the route subtree.

• 需要 page.js 文件才能公开访问路段。

  ¥A page.js file is required to make a route segment publicly accessible.

• 默认情况下，页面为 服务器组件，但可以设置为 客户端组件。

  ¥Pages are Server Components by default, but can be set to a Client Component.

• 页面可以获取数据。查看 数据获取 部分了解更多信息。

  ¥Pages can fetch data. View the Data Fetching section for more information.