钩子事件:当路由发生变化时可以监听到这些事件,从而执行对应的函数。
钩子事件必须要引入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>
效果如下:
这里没有设置锚点,因此不会有跳转效果。