Next.js 13.5.2 App Router中useRouter无法使用问题求助

问题根源 #

1. 组件类型限制：App Router默认组件为服务器组件，无法直接使用next/navigation中的客户端路由钩子（如usePathname、useRouter）。
2. 路由模块混淆：next/router是Pages Router专属模块，在App Router中使用会触发路由系统冲突，导致挂载失败。

解决步骤 #

1. 声明客户端组件 #

在需要使用路由钩子的组件顶部添加'use client'指令，将组件标记为客户端组件：

'use client';

2. 正确导入并使用路由钩子 #

从next/navigation导入对应钩子，示例代码：

'use client';

import { usePathname, useRouter } from 'next/navigation';

export default function CurrentPathComponent() {
  const pathname = usePathname(); // 获取当前URL路径
  const router = useRouter(); // 用于导航操作

  return (
    <div>
      <p>当前路径：{pathname}</p>
      <button onClick={() => router.push('/dashboard')}>跳转到控制台</button>
    </div>
  );
}

3. 清理错误导入 #

删除所有import { useRouter } from 'next/router'这类错误导入，避免与App Router的路由系统冲突。

关键注意点 #

• usePathname专门用于获取当前URL的路径部分，是App Router中替代Pages Router里useRouter().pathname的方案。
• App Router中的useRouterAPI与Pages Router不同，导航需用router.push()、router.replace()，查询参数需通过useSearchParams获取。

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