如何使用路由器从下一个/导航获取当前路径名？答案

【问题标题】：How to get current pathname using router from next/navigation?如何使用路由器从下一个/导航获取当前路径名？
【发布时间】：2022-11-27 16:48:28
【问题描述】：

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

Property 'pathname' does not exist on type '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>
  );
};

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

【问题讨论】：

您可以使用usePathname，但它还不适用于服务器组件

标签： javascript reactjs typescript next.js

【解决方案1】：

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

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>;
}

【讨论】：