NextJS中router.pathname与router.route的区别及使用注意事项

嘿，刚好对Next.js Pages Router里的路由对象属性熟得很，来给你掰扯清楚router.pathname和router.route的区别，还有踩坑点！

一、核心区别（Pages Router 场景） #

先直接上结论：在绝大多数日常开发场景中，这俩属性的值是完全一致的，但它们的定义和边缘场景下的表现有细微差别：

1. router.pathname #

• 本质是你pages目录下的页面文件路径，是静态的路由模板。
• 比如你写了pages/post/[id].js这个动态页面，不管用户访问的是/post/123还是/post/456，pathname永远是/post/[id]，不会包含实际的动态参数或查询字符串。

2. router.route #

• 它代表的是当前匹配到的路由规则，在常规静态/动态路由场景下，和pathname的值完全相同。
• 只有在一些边缘场景（比如配置了复杂的rewrites/redirects、使用catch-all路由[[...slug]]），才可能出现和pathname不一致的情况，但这种情况非常少见。

二、你可能混淆的点：获取“完整页面URL” #

你说这俩属性“似乎都包含页面的完整URL”，大概率是在静态路由场景下（比如pages/about.js），访问/about时，pathname和route都是/about，看起来和地址栏的URL一致。但如果是动态路由，它们就会露出原形——只会显示带占位符的模板路径，而非用户实际看到的URL。

如果你想获取地址栏里用户实际看到的完整URL（包含动态参数、查询字符串），应该用router.asPath，比如访问/post/123?foo=bar时，asPath的值就是/post/123?foo=bar。

三、使用时的陷阱要注意 #

• 不要用pathname/route获取动态参数
  动态参数直接从router.query里取才是最可靠的，比如router.query.id，不要自己去解析pathname里的[id]占位符，容易出错。

• SSR/SSG场景下别乱用useRouter
useRouter是客户端钩子，只能在客户端组件里使用。如果在服务端渲染（getServerSideProps）或静态生成（getStaticProps）的逻辑里要获取路由信息，得用context对象，比如context.req.url或者context.params。

• rewrites配置后的路径差异
  如果你在next.config.js里配置了路径重写（比如把/articles/:id重写到/post/:id），用户访问/articles/123时，pathname和route会指向实际的页面路径/post/[id]，而用户看到的URL是/articles/123，这时候要获取用户看到的路径，必须用asPath。

• 优先用pathname而非route
  虽然大多数场景下两者一致，但pathname的命名更直观，官方文档里也更常引用它，用它可读性更强，也避免边缘场景下的潜在差异。

举个直观的例子 #

假设你有pages/post/[id].js页面：

import { useRouter } from "next/router";

const PostPage = () => {
  const router = useRouter();
  console.log(router.pathname); // 输出: /post/[id]
  console.log(router.route);    // 输出: /post/[id]
  console.log(router.asPath);   // 输出: /post/123（假设访问的是这个URL）
  console.log(router.query.id); // 输出: 123
  return <div>这是文章 {router.query.id}</div>;
};

export default PostPage;

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