Next框架基础

老规矩：脚手架快速搭建基本环境。很多都是重复的，所以省了很多代码。

路径跳转两种方式：

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