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

Question

我正在使用 Next.js 13 中的实验app文件夹，它们已替换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

当使用app路由器（目录）时，pathname的钩子称为usePathname。这是文档的引用：

\n

\n

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

\n

\n

找到下面的示例，并注意\'use client\'顶部的：

\n

\'use client\';\n\nimport { usePathname } from \'next/navigation\';\n\nexport default function Page() {\n  const pathname = usePathname();\n  return <div>{pathname}</div>;\n}\n

\n

截至目前，该文档并未提及\xe2\x80\x99 获取pathname服务器端的方法。但是，您可以使用受此GitHub 评论启发的技术，结合 Next.js中间件和请求headers：

\n

\'use client\';\n\nimport { usePathname } from \'next/navigation\';\n\nexport default function Page() {\n  const pathname = usePathname();\n  return <div>{pathname}</div>;\n}\n

\n

// middleware.js\n\nimport { NextResponse } from "next/server";\n\nexport function middleware(request) {\n  const requestHeaders = new Headers(request.headers);\n  requestHeaders.set("x-pathname", request.nextUrl.pathname);\n\n  return NextResponse.next({\n    request: {\n      headers: requestHeaders,\n    },\n  });\n}\n

\n

如果您正在使用动态路由（也称为[id]文件夹），并且您想知道 slug 的值，请查看此线程。

\n

Answer 2

如果您希望获取服务器端组件/页面/布局上的当前活动路径名，可以使用 next/headers 中的标头。

import { headers } from "next/headers";

export function Component() {
  const headersList = headers();
  const activePath = headersList.get("x-invoke-path");
  // const activeUrl = headersList.get("referer");
  // const activeHost = headersList.get("host");
  
  return (<div>{activePath}</div>)
}