React服务端渲染框架Next.js入门之旅四：路由的6个钩子事件

钩子事件：当路由发生变化时可以监听到这些事件，从而执行对应的函数。

钩子事件必须要引入router：

import Router from 'next/router'  

六个钩子事件如下：

routeChangeStart

routeChangeStart

routerChangeComplete

beforeHistoryChange

routeChangeError

hashChangeStart

hashChangeComplete

验证钩子事件

在index.js中编写监听事件来查看钩子事件的执行。因为没有编写后台服务端代码，所以这里routeChangeError验证不了（404不算做路由错误）。

index.js：

import React from 'react'
import Link from 'next/link'
import Router from 'next/router'  

const Home = () => {//圆括号表示只有返回值没有业务逻辑，有业务逻辑用大括号

    /**6个钩子事件
    routeChangeStart
    routerChangeComplete
    beforeHistoryChange
    routeChangeError
    hashChangeStart
    hashChangeComplete*/
    //路由开始变化
    Router.events.on('routeChangeStart',(...args)=>{
        console.log('1.routeChangeStart->路由开始变化，参数为：',...args)
    })
    //路由变化结束
    Router.events.on('routeChangeComplete',(...args)=>{
        console.log('2.routeChangeComplete->路由变化结束，参数为：',...args)
    })
    //Next.js全部都用History模式
    Router.events.on('beforeHistoryChange',(...args)=>{
        console.log('3.beforeHistoryChange，参数为：',...args)
    })
    //路由发生错误时，404不算
    Router.events.on('routeChangeError',(...args)=>{
        console.log('4.routeChangeError->路由发生错误，参数为：',...args)
    })
    //Hash路由切换之前
    Router.events.on('hashChangeStart',(...args)=>{
        console.log('5.hashChangeStart，参数为：',...args)
    })
    //Hash路由切换完成
    Router.events.on('hashChangeComplete',(...args)=>{
        console.log('6.hashChangeComplete，参数为：',...args)
    })

    function gotoSport(){
        Router.push({
            pathname:'/sport',
            query:{name:'篮球'}
        })
        // 同以下：
        // Router.push('/sport?篮球')
    }

    return (
        <>
            <div>我是首页</div>
            <div>
                <Link href={{pathname:'/sport',query:{name:'篮球'}}}><a>选择篮球</a></Link>
                <br/>
                <Link href="/sport?name=羽毛球"><a>选择羽毛球</a></Link>
            </div>
            <div>
                <button onClick={gotoSport}>选篮球</button>
            </div>
        </>
    )
}

export default Home

效果如下：

可以清楚地看到beforeHistoryChange是在routerChangeComplete之前执行的。

因为Next.js采用的是History模式，因此这里需要编写Hash来验证路由切换。在index.js中增加一个Link：

 {/* 构建一个Hash作为钩子函数5、6的例子 */}
<div>
    <Link href='/#juan'><a>选Juan</a></Link>
</div>

效果如下：

这里没有设置锚点，因此不会有跳转效果。