如何获取Next.js 13的app目录中的当前路径名？

小能豆

如何获取Next.js 13的app目录中的当前路径名？

javascript

我正在使用appNext.js 13 中的实验文件夹，它们已替换next/router为next/navigation，因此我useRouter相应地导入了挂钩。pathname我在路由器中没有看到该属性，该属性确实存在于next/router的路由器中。

类型“AppRouterInstance”上不存在属性“路径名”

我的用例是突出显示用户当前所在的导航栏中的链接。这是我尝试过的：

import Link from "next/link";
import { useRouter } from 'next/navigation';


const StyledNavLink: React.FC<NavLinkProps> = ({ to, children }) => {
  const router = useRouter();
  ...
  return (
    <Link href={to} className={getNavLinkClass({isActive: router.pathname === to})}>
      {children}
    </Link>
  );
};

我可以做些什么来获取当前路径名或其他东西来将我的类添加到活动链接中吗？

阅读 131

2023-08-01

共1个答案

小能豆

在 Next.js 13 中，next/router 已被 next/navigation 替换，并且路由器的属性名称有所更改。要获取当前的路径名，您应该使用 asPath 属性而不是 pathname。

在您的代码中，只需将 router.pathname 替换为 router.asPath 即可：

import Link from "next/link";
import { useRouter } from 'next/navigation';

const StyledNavLink: React.FC<NavLinkProps> = ({ to, children }) => {
  const router = useRouter();
  // ...
  return (
    <Link href={to} className={getNavLinkClass({ isActive: router.asPath === to })}>
      {children}
    </Link>
  );
};

这样应该可以正确地将活动链接与当前路径进行比较，并相应地添加类名。请注意，router.asPath 将返回完整的 URL 路径，因此您需要确保 to 的值也是完整的 URL 路径，以便进行比较。如果需要，您可以使用 useMemo 钩子将 to 的值处理为与 router.asPath 一致的格式。

2023-08-01