獲取 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