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

const router = useRouter();

router.asPath

要获取两种情况下的正确URL，例如动态（[slug]）和固定路径：

const router = useRouter();

let relativeURL = "";

  const slug = router.query.slug;
  if (slug) {
    relativeURL = router.pathname.replace("[slug]", slug as string);
  } else {
    relativeURL = router.pathname;
  }

我只是使用了错误的方法-正确的方法是router.query。
请考虑以下URL：

http://localhost:3000/test-keywords?query=params,%20strings,%20other%20things&anotherLevel=more%20stuff

记录由方法产生的对象：

const router = useRouter();
  console.log(router.query);

输出：

{
    anotherLevel: "more stuff"
    keywords: "test-keywords"
    query: "params, strings, other things"
  }

我一定是忽略了，文件上写得很清楚：https://nextjs.org/docs/routing/dynamic-routes
我想我还是把这个留着吧，免得别人也搞不清楚

我认为正确的方法是在特定的path（例如/twitter）下定义dynamic-routes。
转译页面路径：

/pages/twitter/[keywords].jsx

示例URL：

http://localhost:3000/twitter/kpop-heroes

在url的第一级定义动态路由是不合理的。

这对我很有效

import { useRouter } from "next/router";

...

const router = useRouter();
const path = router.asPath.split("?")[0]; // (remove query string and use asPath since dynamic slug was rendering as "[slug]" using pathname)

...

const navigationList = (
    <MenuList>
      {links.map((item) => {    
        return (
          <MenuItem
            key={item.id}
            disabled={path == item.href}
            sx={{
              m: 0,
              p: 0,
              ...(path == item.href && {
                borderBottom: `1px solid ${theme.palette.primary.light}`,
                backgroundColor: theme.palette.primary.dark,
              }),
            }}
          >
            <StyledLink href={item.href}>{item.label}</StyledLink>
          </MenuItem>
        );
      })}
    </MenuList>
  );