主页 / coding / 问题 / 76992192
Accepted
がとらいふ
Asked: 2023-08-28 18:56:11 +0800 CST

如何获取 Next.js 组件中的路径名？

  • 772

我尝试CustomNavbar使用组件获取路径名usePathname，但它返回了null值。但是，当我调用时usePathname，/pages/index.tsx它工作正常。有谁知道如何解决这个问题？

环境

  • “下一个”：“19.4.13”
  • “反应”：“18.2.0”
  • “反应-dom”：“18.2.0”

目录

  • 成分
    • 自定义导航栏.tsx
  • 页面

    • _app.tsx

    • 文档.tsx

    • 索引.tsx

      。

      。

      。

代码

// CustomNavbar.tsx
"use client";

import React from "react";
import {
  Navbar,
  NavbarBrand,
  NavbarContent,
  NavbarItem,
  Link,
  Button,
} from "@nextui-org/react";
import { usePathname } from "next/navigation";

export const CustomNavbar = () => {
  const pages = {
    home: "/",
    subscriptions: "/subscriptions",
    playlists: "/playlists",
  };
  const pathname = usePathname();
  console.log(pathname); // null
   .
   .
   .
next.js

1 个回答

  1. Best Answer

    您正在尝试在使用页面目录时使用应用程序路由器的功能。具体来说，该usePathname钩子在页面目录中不可用。这是一个如何实现您所寻求的示例：

    import { useRouter } from "next/router";

const MyPathname = () => {
  const router = useRouter();
  return (
    <span>
      Current pathname: <pre>{router.pathname}</pre>
    </span>
  );
};

    请记住，页面目录中也不需要“使用客户端”指令，因为它不支持反应服务器组件。

    • 0

相关问题