Routing 路由

基本使用

1. Next.js 是基于“文件系统”的路由，约定大于配置。
2. 所有路由必须放在 app 文件夹下
3. 每个路由页面命名为 page.tsx，且内部的路由组件需要 “默认导出”。

示例：

next-app/
└── src/
    └── app/
        ├── page.tsx             # localhost:3000
        ├── about/
        │   └── page.tsx         # localhost:3000/about
        └── profile/
            └── page.tsx         # localhost:3000/profile

嵌套路由

通过嵌套文件夹层级来实现嵌套路由，例如 blog/first、blog/second...

示例：

next-app/
└── src/
    └── app/
        └── blog/
            ├── page.tsx         # localhost:3000/blog
            ├── first/
            │   └── page.tsx     # localhost:3000/blog/first
            └── second/
                └── page.tsx     # localhost:3000/blog/second

动态路由

动态参数通过 [] 语法表示，如 [userId]、[blogId]

示例：

next-app/
└── src/
    └── app/
        └── products/
            ├── page.tsx         # localhost:3000/products
            └── [productId]/
                └── page.tsx     # localhost:3000/products/:productId

通过 params 获取动态参数：

function ProductDetails({ params }: { params: { productId: string } }) {
  return <div>Product {params.productId}</div>
}

动态嵌套路由示例：

next-app/
└── src/
    └── app/
        └── products/
            ├── page.tsx
            └── [productId]/
                ├── page.tsx            # /products/:productId
                └── reviews/
                    ├── page.tsx        # /products/:productId/reviews
                    └── [reviewsId]/
                        └── page.tsx    # /products/:productId/reviews/:reviewsId

通过 params 获取动态参数：

function ProductReview({ params }: { params: { productId: string; reviewsId: string } }) {
  return (
    <>
      <div>Product {params.productId}</div>
      <div>Review {params.reviewsId}</div>
    </>
  )
}

Slug 捕获所有路径

当你需要捕获任意数量的路径段时，可以使用 [...slug]。

示例：

next-app/
└── src/
    └── app/
        └── docs/
            └── [...slug]/
                └── page.tsx     # localhost:3000/docs/* 任意路径

通过 params 获取捕获的路径段：

function DocsPage({ params }: { params: { slug: string[] } }) {
  if (params.slug?.length === 2) {
    return <div>Two-level docs</div>
  } else if (params.slug?.length === 1) {
    return <div>One-level docs</div>
  }

  return <div>Docs Page</div>
}

如果还想匹配 localhost:3000/docs，可以使用可选参数 [[...slug]]：

docs/
└── [[...slug]]/
    └── page.tsx