Next.js中app router获取router.pathname

我访问了/article/5863462212751 页面，控制台打印/article/[id]，这就是我们预期的结果。现在讲解一下代码的思路。

先获取完整的URL然后获取params对象，将url转为数组变成这样['article','5863462212751'] 然后根据params中的value进行匹配，如果value和url中的元素匹配成功就置换成[${key}]，代码简单,思路清晰。

代码:

import { useParams,  usePathname } from "next/navigation";

// 获取page router下的router.pathname
// https://github.com/vercel/next.js/discussions/61846

function useGetRawPath() {
  const params = useParams();
  const pathname = usePathname();
  const splittedRoute = pathname.split("/");

  if (typeof params === "object" && params !== null) {
    let reconstructedPath = "";

    for (let i = 1; i < splittedRoute.length; i++) {
      const segment = splittedRoute[i];

      // Check if the segment matches any value in the params object
      const matchingKey = Object.keys(params).find(key => params[key] === segment);

      if (matchingKey) {
        // Replace the segment with the dynamic segment
        reconstructedPath += `/[${matchingKey}]`;
      } else {
        // Keep the original segment
        reconstructedPath += `/${segment}`;
      }
    }

    return reconstructedPath;
  } else {
    // Params object is not present
    return pathname;
  }
}
export default useGetRawPath;