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模式下的两个事件hashChangeStarthashChangeComplete,就都在这里进行编写了。

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

总结

本文主要学习了路由的钩子事件,利用钩子事件是可以做很多事情的,比如转换时的加载动画,关掉页面的一些资源计数器等。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P05:Next.js教程-路由的六个钩子事件

发表评论

提供最优质的资源集合

立即查看 了解详情