Skip to main content

自定义路由

在开始前我们建议您先阅读路由基本概念页面。

本页面将会指导您如何定义和组织 Next.js 应用程序中的路由。

创建路由​

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

每个文件夹代表一个映射到URL的 路由 段。 要创建嵌套路由, 您可以将文件夹嵌套在彼此内部。

Route segments to path segments

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

Defining Routes

在这个图示中, 不能够公开访问/dashboard/analytics URL 路径，因为它没有对应的page.js文件。可以使用此文件夹来存储组件、样式、图片或其它共享文件。

您需要知道: 特殊文件可以使用.js, .jsx, or .tsx文件扩展名。

创建 UI​

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

例如, 要创建您的第一个页面，您需要在app目录下添加一个page.js文件并且在此文件中 export 一个 React 组件:

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