Next.js 中的 history.push

在 Next.js 中，可以使用 next/router 模块提供的 useRouter() 钩子函数获取路由对象，其中包括一个 push() 方法，可以实现路由跳转功能。

使用方法

import { useRouter } from 'next/router'

function handleClick() {
  const router = useRouter()
  router.push('/newPage')
}

在上面的示例中，我们首先导入了 useRouter() 钩子函数，然后在handleClick() 函数中获取了路由对象，并通过 push() 方法实现了跳转到新的页面。

功能说明

push() 方法接收一个字符串作为参数，用于指定目标路由路径。例如上面的例子中，我们将目标路径设置为 /newPage。

注意，push() 方法默认采用浏览器的 客户端路由 功能，即不会真正刷新页面，而是通过 JavaScript 动态加载新页面，有利于提升页面响应速度和用户体验。如果需要实现服务端渲染的路由跳转，则需要使用 next/router 模块的 useEffect() 钩子函数和 next/router 模块的 Router 类实现。

参数说明

push() 方法还可以接收第二个参数，用来指定要跳转的页面需要传递的参数。例如：

router.push({
  pathname: '/newPage',
  query: { name: 'foo' },
})

在上面的示例中，我们通过 query 参数传递了一个名为 name 值为 foo 的参数给目标页面 /newPage，可以在目标页面中通过 useRouter() 钩子函数获取这个参数。

总结

在 Next.js 中，使用 useRouter() 钩子函数和 push() 方法可以方便地实现路由跳转功能。如果需要传递参数，则可以通过第二个参数来实现。