跳至内容

定义路由

我们建议您在继续之前阅读路由基础页面。

此页面将指导您了解如何在 Next.js 应用程序中定义和组织路由。

创建路由

Next.js 使用基于文件系统的路由器,其中文件夹用于定义路由。

每个文件夹都表示一个路由,该段映射到一个URL段。要创建一个嵌套路由,您可以将文件夹彼此嵌套。

Route segments to path segments

一个特殊的page.js文件用于使路由段可公开访问。

Defining Routes

在此示例中,/dashboard/analytics URL 路径不可公开访问,因为它没有相应的 page.js 文件。此文件夹可用于存储组件、样式表、图像或其他共置文件。

注意.js.jsx.ts.tsx 文件扩展名可用于特殊文件。

创建 UI

特殊文件约定用于为每个路由段创建 UI。最常见的是用于显示特定于路由的 UI 的页面,以及用于显示跨多个路由共享的 UI 的布局

例如,要创建您的第一个页面,请在 app 目录中添加一个 page.js 文件,并导出一个 React 组件

app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

后续步骤

了解有关创建页面和布局的更多信息。