如何使用Next.js 路由器

学习如何使用`next/router`包来控制Next.js中的路由

在使用Link连接Next.js中的两个页面时，我们看到了如何使用Link组件来声明性地处理Next.js应用程序中的路由。

在JSX中管理路由真的很方便，但有时你需要以编程方式触发路由变化。

在这种情况下，你可以直接访问Next.js Router，在next/router 包中提供，并调用其push() 方法。

下面是一个访问路由器的例子。

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()
  //...
}

一旦我们通过调用useRouter() 得到路由器对象，我们就可以使用它的方法。

这是客户端的路由器，所以方法应该只在面向前台的代码中使用。确保这一点的最简单的方法是在useEffect() React钩子中包裹调用，或在React有状态组件的componendDidMount() 。

你可能最常使用的是push() 和prefetch() 。

push() 允许我们在前端以编程方式触发一个URL的变化。

prefetch() 允许我们以编程方式预取一个URL，当我们没有一个自动处理预取的 标签时，这很有用。Link

router.prefetch('/login')

完整的例子。

import { useRouter } from 'next/router'

export default () => {
  const router = useRouter()

  useEffect(() => {
    router.prefetch('/login')
  })
}

你也可以使用路由器来监听路由变更事件。