#如何使用Next.js路由器

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

使用Link连接两个页面的Next.js上,我们看到了如何使用Link组件在Next.js应用中声明式地处理路由。

在JSX中管理路由非常方便,但有时您需要以编程方式触发路由更改。

在这种情况下,您可以直接访问Next.js的路由器,它位于next/router包中,并调用其push()方法。

下面是访问路由器的示例:

import { useRouter } from 'next/router'

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

通过调用useRouter()来获取路由器对象之后,我们可以使用它的方法。

这是客户端路由器,因此方法应仅在前端代码中使用。最简单的方法是将调用包装在useEffect() React钩子中,或者在React有状态组件中的componendDidMount()内部。

您最常使用的是push()prefetch()

push()允许我们以编程方式触发URL更改,如前端代码所示:

router.push('/login')

prefetch()允许我们以编程方式预取URL,在没有自动处理预取的Link标签时非常有用,如下所示:

router.prefetch('/login')

完整示例:

import { useRouter } from 'next/router'

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

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

您还可以使用路由器来监听路由变更事件