Pages

Pages是对应于特定路由的唯一UI。您可以通过在page.js文件中默认导出一个组件来定义页面。

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

app/page.tsx

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

app/page.js

// `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文件:

app/dashboard/page.tsx

// `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

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

提示

• 页面可以使用.js、.jsx或.tsx文件扩展名。
• 页面始终是路由子树的叶节点。
• 需要page.js文件才能使路由段公开可访问。
• 页面默认是服务器组件，但可以设置为客户端组件。
• 页面可以获取数据。查看数据获取部分以获取更多信息。