老规矩:脚手架快速搭建基本环境。很多都是重复的,所以省了很多代码。
路径跳转两种方式:
1.link标签式跳转。
2.Router跳转,可把方法分离出来。
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
function gotoA(){
Router.push('/jspangA')
}
return(
<>
<div>我是首页</div>
<div>
<Link href="/jspangA">
<a>
<span>去JspangA页面</span>
<span>前端博客</span>
</a>
</Link>
</div>
<div><Link href="/jspangB"><a>去JspangB页面</a></Link></div>
<div>
<button onClick={gotoA}>去JspangA页面</button>
</div>
</>
)
}
export default Home
传递参数通过query(?id=1),通过router.query.属性名,通过以下代码展示:
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
return(
<>
<div>我是首页</div>
<div>
<Link href="/xiaojiejie?name=波多野结衣"><a>选波多野结衣</a></Link><br/>
<Link href="/xiaojiejie?name=苍井空"><a>选苍井空</a></Link>
</div>
</>
)
}
export default Home
import { withRouter} from 'next/router'
import Link from 'next/link'
const Xiaojiejie = ({router})=>{
return (
<>
<div>{router.query.name},来为我们服务了 .</div>
<Link href="/"><a>返回首页</a></Link>
</>
)
}
export default withRouter(Xiaojiejie)
withRouter是高级组件,以上是link标签式跳转,以下是编程式跳转,看代码:
<div>
<button onClick={gotoXiaojiejie}>选井空</button>
</div>
function gotoXiaojiejie(){
Router.push({
pathname:'/xiaojiejie',
query:{
name:'井空'
}
})
}
方法用对象的形式来写,显得高大上。
1.routeChangeStart:路由发生变化时
2.routeChangeComplete:路由结束变化时
3.beforeHistoryChange:浏览器history触发前
4.routeChangeError:路由跳转发生错误时,注意404找不到页面不算错误
还有两件事件针对hash。
5.hashChangeStart:哈希跳转开始时执行
6.hashChangeComplete:哈希跳转完成时
以下使用哈希跳转:
<div>
<Link href="#jspang"><a>选JSPang</a></Link>
</div>
给出全部代码:
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
function gotoXiaojiejie(){
Router.push({
pathname:'/xiaojiejie',
query:{
name:'井空'
}
})
}
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