Next.js如何实现/members/:id/edit动态路由及对应页面？

不管你用的是App Router（Next.js13+）还是Pages Router，都得靠文件夹/文件结构来匹配动态路由，对应/members/:id/edit的配置方式如下：

一、App Router 版本（Next.js13及以上推荐） #

按这个层级创建文件夹和文件就行：

app/
├─ members/
│  ├─ [id]/  // 方括号包裹的是动态参数名，对应路由里的:id
│  │  ├─ edit/
│  │  │  └─ page.js  // 这个文件就是编辑页面的入口，必须叫page.js/tsx

然后在page.js里写你的编辑页面组件，动态id可以通过params拿到：

// app/members/[id]/edit/page.js
export default function MemberEditPage({ params }) {
  return (
    <div>
      <h1>编辑成员 {params.id}</h1>
      {/* 这里放你的编辑表单、逻辑代码 */}
    </div>
  )
}

二、Pages Router 版本（Next.js12及更早，或13+仍在使用的情况） #

在pages目录下按以下结构创建文件：

pages/
├─ members/
│  ├─ [id]/
│  │  ├─ edit.js  // 文件名直接对应路由的edit段，动态id来自上级的[id]文件夹

页面组件里用useRouter拿动态参数：

// pages/members/[id]/edit.js
import { useRouter } from 'next/router'

export default function MemberEditPage() {
  const router = useRouter()
  const { id } = router.query

  return (
    <div>
      <h1>编辑成员 {id}</h1>
      {/* 编辑相关内容 */}
    </div>
  )
}

最后检查下Link组件的使用 #

确保用的是Next.js自带的next/link，写法别错：

import Link from 'next/link'

// 跳转代码
<Link href={`/members/${row.id}/edit`}>编辑该成员</Link>

这样配置完，点击Link就会正确跳转到对应的编辑页面，地址栏显示的路径也会和你设置的一致，不会再出现404了。

内容的提问来源于stack exchange，提问作者Awoooooooooooooooooooo