P05:Next.js教程-路由的六个钩子事件
目录
文章目录隐藏
路由的钩子事件,也就是当路由发生变化时,可以监听到这些变化事件,执行对应的函数。它一共有六个钩子事件,接下来我们一起来学习一下。
routerChangeStart 路由发生变化时
在监听路由发生变化时,我们需要用 Router 组件,然后用on
方法来进行监听,在pages
文件夹下的index.js
,然后写入下面的监听事件,这里我们只打印一句话,就不作其他的事情了。代码如下:
Router.events.on('routeChangeStart',(...args)=>{ console.log('1.routeChangeStart->路由开始变化,参数为:',...args) })
这个时路由发生变化时,时间第一时间被监听到,并执行了里边的方法。
routerChangeComplete 路由结束变化时
路由变化开始时可以监听到,那结束时也时可以监听到的,这时候监听的事件是routerChangeComplete
。
Router.events.on('routeChangeComplete',(...args)=>{ console.log('routeChangeComplete->路由结束变化,参数为:',...args) })
beforeHistoryChange 浏览器 history 触发前
history 就是 HTML 中的 API,如果这个不了解可以百度了解一下,Next.js
路由变化默认都是通过 history 进行的,所以每次都会调用。 不适用 history 的话,也可以通过 hash。
Router.events.on('beforeHistoryChange',(...args)=>{ console.log('3,beforeHistoryChange->在改变浏览器 history 之前触发,参数为:',...args) })
routeChangeError 路由跳转发生错误时
Router.events.on('routeChangeError',(...args)=>{ console.log('4,routeChangeError->跳转发生错误,参数为:',...args) })
需要注意的是 404 找不到路由页面不算错误,这个我们就不演示了。
转变成 hash 路由模式
还有两种事件,都是针对 hash 的,所以现在要转变成 hash 模式。hash 模式下的两个事件hashChangeStart
和hashChangeComplete
,就都在这里进行编写了。
Router.events.on('hashChangeStart',(...args)=>{ console.log('5,hashChangeStart->hash 跳转开始时执行,参数为:',...args) }) Router.events.on('hashChangeComplete',(...args)=>{ console.log('6,hashChangeComplete->hash 跳转完成时,参数为:',...args) })
在下面的 jsx 语法部分,再增加一个链接,使用 hash 来进行跳转,代码如下:
<div> <Link href="/#mybj"><a>选 Mybj</a></Link> </div>
为了方便你学习,我这里给出index.js
的全部代码,你可以在练习时进行参考。
import React from 'react' import Link from 'next/link' import Router from 'next/router' const Home = () => { // gotoJavascript function gotoJavascript(){ Router.push({ pathname: '/javascript', query:{ name: 'react 教程' } }) } Router.events.on('routeChangeStart',(...args)=>{ console.log('1.routeChangeStart->路由开始变化,参数为:',...args) }) Router.events.on('routeChangeComplete',(...args)=>{ console.log('2.routeChangeComplete->路由结束变化,参数为:',...args) }) Router.events.on('beforeHistoryChange',(...args)=>{ console.log('3,beforeHistoryChange->在改变浏览器 history 之前触发,参数为:',...args) }) Router.events.on('routeChangeError',(...args)=>{ console.log('4,routeChangeError->跳转发生错误,参数为:',...args) }) Router.events.on('hashChangeStart',(...args)=>{ console.log('5,hashChangeStart->hash 跳转开始时执行,参数为:',...args) }) Router.events.on('hashChangeComplete',(...args)=>{ console.log('6,hashChangeComplete->hash 跳转完成时,参数为:',...args) }) return ( <> <div>我是首页</div> <div> <Link href={{pathname:'/javascript',query:{name:'react 教程'}}}><a>react 教程</a></Link><br/> {/* <Link href="/javascript?name=react 教程"><a>react 教程</a></Link> */} <Link href="/javascript?name=node 教程"><a>node 教程</a></Link> </div> <div> <button onClick={gotoJavascript}>选择 react</button> </div> <div> <Link href="/#mybj"><a>选 Mybj</a></Link> </div> </> ) } export default Home
总结
本文主要学习了路由的钩子事件,利用钩子事件是可以做很多事情的,比如转换时的加载动画,关掉页面的一些资源计数器等。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P05:Next.js教程-路由的六个钩子事件
码云笔记 » P05:Next.js教程-路由的六个钩子事件