javascript - NextJS : dynamic router. 路径名不显示路径，但文件名 - 如何获取路径中的单词？

Question

我正在使这个示例尽可能简单，如果需要更多信息来解决，我可以稍后包含更多代码
我在 nextJS 中使用动态路由。我的应用程序根据通过 API 使用 twitter-v2 输入动态路由的关键字从 twitter 中提取结果包裹
我正在尝试使用 router.pathname 的 route 的单词为了在页面上创建一些属性，但它使用文件名而不是 url 中的单词。
NextJS 版本:Next 9.5.3渲染页面路径:/pages/[keywords].jsx示例网址:

http://localhost:3000/kpop-heroes

示例页面功能:

import Router from 'next/router'

export default function Keywords() {
  const router = useRouter();

  const KEYWORDS = router.pathname
    .slice(1)
    .split('-')
    .join(' ');

  return (
   <div>Twitter reactions to <code>{KEYWORDS}</code></div>
  )
};

渲染:

我误解了这个功能吗？是否可以检索 url 中的单词而不是文件名？
注意:我一直在使用 window.location.href作为一种解决方法，但我的理解是访问窗口对象不是最佳的

Answer 1

使用 asPath属性(property)。它返回浏览器中显示的路径(包括查询)。
https://nextjs.org/docs/api-reference/next/router#router-object

const router = useRouter();

router.asPath