Next.js App Router中是否有router.query的等效替代方案？

1. 服务器组件（Server Components） #

如果你的页面或组件是默认的服务器组件，直接通过组件接收的params props就能拿到slug，这是App Router最直接的实现方式：

// app/[slug]/page.js
export default function Page({ params }) {
  const { slug } = params;
  return <div>当前URL中的Slug: {slug}</div>;
}

注意：方括号里的路由名称要和params里的字段严格对应，比如路由是app/articles/[articleSlug]/page.js，那就要用params.articleSlug来获取。

2. 客户端组件（Client Components） #

如果是需要交互的客户端组件，要使用next/navigation提供的useParams钩子：

'use client';

import { useParams } from 'next/navigation';

export default function SlugDisplay() {
  const params = useParams();
  const slug = params.slug;
  return <div>当前URL中的Slug: {slug}</div>;
}

必须先添加'use client'指令声明为客户端组件，否则无法使用客户端专属的钩子。

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