获取 URL 参数 (Next.js 13)答案

【问题标题】：Get URL Params (Next.js 13)获取 URL 参数 (Next.js 13)
【发布时间】：2022-11-26 17:13:48
【问题描述】：

我正在使用 /app 目录构建 Next.js 13 项目。我有一个问题 - 在根布局中，我有一个永久导航栏组件，该组件是从 /components/Navbar.jsx 导入的。基本上在 Navbar.jsx 内，我希望能够访问 url 中的 slug 参数，例如：localhost:3000/:slug，我想要其中的 slug id。我已经为那个 slug 定义了一个 Next.js 13 page.jsx。但是我如何在导航栏零件。我也不想使用 window.location.pathname，因为当页面路由到不同的 slug 时它不会改变，只有在我刷新时才会改变。

我尝试了旧的 Next.js 12 方法：

//components/navbar.jsx;

import { useRouter } from "next/navigation";

export default function Navbar () {
  const router = useRouter();
  const { slug } = router.query;

  useEffect(() => {
    console.log(slug);
  }, []);

  return <p>Slug: {slug}</p>
}

但是它不起作用。

【问题讨论】：

标签： reactjs url next.js

【解决方案1】：

必须使用usePathname

import { usePathname } from 'next/navigation';

【讨论】：