获取 URL 参数 (Next.js 13)

Question

我正在使用/app目录构建一个 Next.js 13 项目。 我有一个问题 - 在根布局中，我有一个永久导航栏组件，该组件是从/components/Navbar.jsx导入的。 基本上在Navbar.jsx内部，我希望能够访问 url 中的 slug 参数，例如： localhost:3000/:slug我想要其中的 slug id。 我已经为那个 slug 定义了一个 Next.js 13 page.jsx。 但是如何在导航栏组件中获取 slug id。 我也不想使用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> }

但是它不起作用。

Answer 1

必须使用usePathname

import { usePathname } from 'next/navigation';

Answer 2

要在Next.js 13中的服务器组件中获取 URL 参数，可以使用页面 function 的searchParams参数。

URL

localhost:3000/?slug

页面.js

export default function Page({searchParams}) {
   return <Navbar slug={searchParams}></Navbar>
}

导航栏.js

export default function Navbar(props) {
   return <p>Slug: {props.slug}</p>
}

更多信息： https://beta.nextjs.org/docs/api-reference/file-conventions/page