Next.js 动态路由

用 [param] 定义动态路由参数，匹配任意值的 URL 片段。

三种模式

模式	目录名	匹配
基本	[id]	/shop/123
多片段	[...slug]	/shop/123/456/789
可选	[[...slug]]	/shop 或 /shop/123

目录结构

app/shop/
  [id]/page.tsx          → /shop/:id
  [...id]/page.tsx       → /shop/:id*（多段捕获）
  [[...id]]/page.tsx     → /shop 或 /shop/:id*（可选）

接受参数

'use client'
import { useParams } from 'next/navigation'

export default function ShopPage() {
  const params = useParams()
  // [id]      → { id: '123' }
  // [...id]    → { id: ['123', '456', '789'] }
  // [[...id]]  → {} 或 { id: ['123'] }
}

三种模式对比

/shop/123         → [id] ✓   [...id] ✓   [[...id]] ✓
/shop/123/456     → [id] ✗   [...id] ✓   [[...id]] ✓
/shop             → [id] ✗   [...id] ✗   [[...id]] ✓