Next 13客户端组件中无法获取URL Slug的问题咨询

这不是Bug，也不是功能缺失，只是App Router和旧的Pages Router在设计逻辑上有差异。

客户端组件的解决方法 #

在App目录的客户端组件里，要获取/journal/[date]路由中的date参数，得用useParams()钩子，而不是原来Pages Router里的router.query。

示例代码：

'use client';

import { useParams } from 'next/navigation';

export default function JournalEntry() {
  const params = useParams();
  const date = params.date; // 这里就能拿到URL里的date参数

  return <div>当前日期：{date}</div>;
}

为啥原来的方法不好使？ #

• App Router里的useRouter已经移除了query属性，因为新路由系统把动态路由参数和查询字符串做了更清晰的区分。
• useSearchParams本来就只负责处理URL中?后面的查询参数（比如/journal/2024-05-20?tag=work里的tag），管不到动态路由段里的参数。

额外提一下服务器组件 #

如果是服务器组件，连钩子都不用，直接通过组件接收的params参数就能拿到动态路由值：

// 服务器组件，不需要加'use client'
export default function JournalEntry({ params }) {
  const date = params.date;

  return <div>当前日期：{date}</div>;
}

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