在Next.js App目录中使用next/navigation时如何获取router.asPath？

在Next.js 13+的App Router体系中，next/navigation提供的useRouter并不包含asPath属性——这是它和Pages Router下next/router的核心区别之一，直接调用router.asPath自然会报错。而你尝试的next/router属于Pages Router的API，在App Router组件中完全不兼容，所以也无法生效。

要实现类似asPath的功能，你需要用App Router提供的专属hooks组合获取当前路径：

• 引入必要的hooks
  在客户端组件顶部导入usePathname和useSearchParams（它们和useRouter一样，只能在客户端组件中使用，记得加上'use client'指令）：

  'use client';
  import { useRouter, usePathname, useSearchParams } from "next/navigation";
  

• 拼接自定义的asPath
usePathname()获取当前路径的路径部分，useSearchParams()获取查询参数，将两者拼接即可得到和asPath完全一致的字符串：

  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  
  // 拼接成包含查询参数的完整路径
  const asPath = `${pathname}${searchParams.toString() ? `?${searchParams.toString()}` : ""}`;
  
  const refreshData = () => {
    router.replace(asPath);
  };
  

这样就能实现你想要的通过router.replace刷新当前页面的需求了。

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