如何使用Next.js路由器

了解如何使用next/router包以控制Next.js中的路由

使用链接在Next.js中链接两个页面我们看到了如何使用Link组件以声明方式处理Next.js应用程序中的路由。

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

在这种情况下,您可以直接访问Next.js路由器(在next/router打包,然后调用它push()方法。

这是访问路由器的示例:

import { useRouter } from 'next/router'

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

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

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

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

push()允许我们在前端以编程方式触发URL更改:

router.push('/login')

prefetch()允许我们以编程方式预取网址,当我们没有网址时就很有用Link标签会自动为我们处理预取:

router.prefetch('/login')

完整示例:

import { useRouter } from 'next/router'

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

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

您也可以使用路由器收听路线变更事件

免费下载我的Next.js手册


接下来的更多教程: