NextJS中如何从/app/books/[name]/edit路径获取[name]参数

你完全不用手动拆分路径，NextJS的App Router提供了两种更贴合框架的方案，根据你的页面是服务器组件还是客户端组件来选择：

1. 服务器组件：直接通过组件props接收参数 #

如果你的edit/page.tsx是服务器组件（默认就是，无需添加'use client'指令），可以直接在组件的props里解构出params对象，其中就包含name参数：

export default function EditBookPage({ params }: { params: { name: string } }) {
  const bookName = params.name;

  return (
    <div>
      <h1>编辑书籍：{bookName}</h1>
      {/* 这里可直接编写服务器端逻辑，比如从数据库拉取书籍详情 */}
    </div>
  );
}

这种方式是服务器组件的原生支持，无需额外导入钩子，性能更优，也不用受客户端渲染的限制。

2. 客户端组件：使用useParams钩子 #

如果你的页面需要客户端交互（比如表单状态管理），需要标记为客户端组件，此时用next/navigation里的useParams钩子即可：

'use client';

import { useParams } from 'next/navigation';

export default function EditBookPage() {
  // 用泛型指定参数类型，避免类型报错
  const params = useParams<{ name: string }>();
  const bookName = params.name;

  return (
    <div>
      <h1>编辑书籍：{bookName}</h1>
      {/* 客户端交互逻辑，比如表单提交、状态更新 */}
    </div>
  );
}

为什么这两种方案更靠谱？ #

• 这是NextJS官方为动态路由设计的标准API，完全适配路由结构变化，比如以后调整路由层级，代码无需修改
• 避免手动拆分路径的潜在问题，比如路径含特殊字符、路由结构变动导致拆分逻辑失效
• 服务器组件的方式还能直接在服务端拿到参数做数据预取，提升页面加载性能

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