如何使用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手册