获取URL (Next.js 13)

Question

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

我已经尝试了旧的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>
}

​

但是，它不起作用。

Answer 1

必须使用usePathname

import { usePathname } from 'next/navigation';