Início / coding / Perguntas / 76992192
Accepted
がとらいふ
Asked: 2023-08-28 18:56:11 +0800 CST

Como posso obter o nome do caminho no componente em Next.js?

  • 772

Tentei obter o nome do caminho no CustomNavbarcomponente usando usePathname, mas ele retornou nullvalor. Porém, quando liguei usePathname, /pages/index.tsxfuncionou corretamente. Alguém sabe como resolver esse problema?

Ambiente

  • "próximo": "13.4.19"
  • "reagir": "18.2.0"
  • "react-dom": "18.2.0"

Diretórios

  • componentes
    • CustomNavbar.tsx
  • Páginas

    • _app.tsx

    • documento.tsx

    • índice.tsx

      .

      .

      .

Código

// 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 respostas

  1. Best Answer

    Você está tentando usar recursos do roteador do aplicativo enquanto usa o diretório de páginas. Especificamente, o usePathnamegancho não está disponível no diretório de páginas. Aqui está um exemplo de como conseguir o que você procura:

    import { useRouter } from "next/router";

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

    Tenha em mente que a diretiva "use client" também não é necessária dentro do diretório de páginas, pois não suporta componentes do servidor react.

    • 0

relate perguntas