在Next.js >=14的App Router中如何正确获取URL slug？

在App Router中，不需要手动拆分pathname，官方提供了更简洁可靠的方式获取路由中的slug，分两种场景：

1. 服务器组件（默认场景） #

app目录下的page.tsx默认是服务器组件，Next.js会自动将路由段参数注入到组件的params参数中：

目录结构：

/src
  /app
    /[slug]
      /page.tsx

代码示例：

// app/[slug]/page.tsx
export default function Page({ params }: { params: { slug: string } }) {
  const { slug } = params;
  // 访问 /my-first-post 时，slug的值就是 "my-first-post"
  return <div>Post Slug: {slug}</div>;
}

如果是嵌套路由（比如/posts/[slug]/page.tsx），用法完全一致，params.slug会自动匹配对应路由段的值，无需调整逻辑。

2. 客户端组件（加'use client'指令） #

如果你的组件是客户端组件（需要交互或使用客户端钩子），可以使用useParams钩子：

'use client';

import { useParams } from 'next/navigation';

export default function Page() {
  const params = useParams();
  // 由于useParams返回值类型为unknown，需要做类型断言
  const slug = params.slug as string;
  return <div>Post Slug: {slug}</div>;
}

为什么不要手动拆分pathname？ #

你之前尝试的拆分pathname方式存在明显缺陷：

• 路由结构调整后（比如新增层级），需要手动修改数组索引，维护成本高
• 缺乏类型安全，容易出现undefined或错误值
• 不符合Next.js App Router的设计规范，官方推荐使用params方式

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