next.js next/navigation 手动跳转携带参数

在 `next.js` 和 `next/navigation` 中，您可以使用编程式导航来手动跳转到其他页面并携带参数。下面是一些常见的方法：

1. 使用 `next/router` 模块的 `push()` 函数：您可以使用 `push()` 函数来将用户导航到其他页面，并携带查询参数或路由参数。例如，以下示例演示如何使用 `push()` 函数在 `onClick` 事件中手动导航到 `/post` 页面并携带 `id=123` 查询参数：

   import { useRouter } from 'next/router'

   function handleClick() {
     const router = useRouter()
     router.push({
       pathname: '/post',
       query: { id: '123' }
     })
   }

   export default function Home() {
     return (
       <div>
         <h1>Home page</h1>
         <button onClick={handleClick}>Go to Post</button>
       </div>
     )
   }

2. 使用 `next/link` 组件的 `href` 属性：您可以使用 `next/link` 组件的 `href` 属性来创建链接，并在需要时手动触发导航。例如，以下示例演示如何使用 `next/link` 组件在 `onClick` 事件中手动导航到 `/post` 页面并携带 `id=123` 查询参数：

   import Link from 'next/link'

   function handleClick() {
     window.location.href = '/post?id=123'
   }

   export default function Home() {
     return (
       <div>
         <h1>Home page</h1>
         <Link href='/post?id=123'>
           <a>Go to Post</a>
         </Link>
         <button onClick={handleClick}>Go to Post</button>
       </div>
     )
   }

综上所述，`next.js` 和 `next/navigation` 提供了多种方法来手动跳转到其他页面并携带参数。您可以根据自己的需求选择最适合的方法来实现导航。