如何使用 Next 13 获取应用程序目录中的当前路径名？

Question

我在 Next.js 13 中使用实验性appDir ，他们已将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>
  );
};

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

Answer 1

Next 13 中的pathname有一个名为usePathname()的钩子。 他们在useRouter()的新文档中说：

pathname字符串已被删除并替换为usePathname() 。

已经说过， usePathname()和useRouter()都只能在客户端组件中工作，该组件顶部应该有一个"use client"字符串：

usePathname挂钩允许您从客户端组件读取当前的 URL 路径名。

'use client';

import { usePathname } from 'next/navigation';

export default function Page() {
  const pathname = usePathname();
  return <div>{pathname}</div>;
}