#如何使用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')
})
}
您还可以使用路由器来监听路由变更事件。