在Next.js中如何导航到带有url参数的页面？

Question

我将 Next.js 与 TypeScript 结合使用，我想导航到新页面并希望包含 URL 参数。我该怎么做？

例如，我位于

http://localhost:3000/

，我想通过单击按钮导航到

http://localhost:3000/path?queryParam=value

。

Answer 1

1. 您只能在客户端渲染的组件上执行此操作， 因此您需要在组件顶部包含

   'use client'

   。
2. 使用

   useRouter

   中的

   next/navigation

   挂钩。
3. 实例化一个新的

   URLSearchParams

   。
4. 将所有 URL 参数设置为新的

   URLSearchParams

   。
5. 使用router.push函数导航到新页面，包括给定的参数。

例如：

'use client'
 
import { useRouter } from 'next/navigation'
 
export default function Page() {
  const router = useRouter()
 
  return (
    <button
      onClick={() => {
        const params = new URLSearchParams();
        params.set("queryParam", "value");

        router.push(`/path?${params}`);
      }}
    />
  )
}

来源：

• Next.js useRouter
• MDN Web 文档 URLSearchParams