next.js 初始化

创建项目

• npm install --save react react-dom next
• npx create-next-app 项目名字

路由跳转、标签跳转

标签跳转

import React from "react";
import Link form 'next/link'
const Home = () =>{
  return (
     <>
       <Link href='/a'>前往a页面</Link>
     </>
  )
  
}

路由跳转

import React from "react";
import Router from 'next/router'
const Home = () =>{
     function gotoA(){
       Router.push('/a')
     }
  return (
    <>
      <button onClick={gotoA}>点击</button>
    </>
  )

}

路由使用query传递参数和接受参数

parameter.js

import {withRouter} from 'next/router'

const query = ({router})=>{
   return (
     <>
       <div>{router.query.name}</div>
     </>
   )
}
export default withRouter(query)

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

const Home = ()=>{
  function gotoA(){
     Router.push('/parameter?name=xxxx')
  }
  // 面向对象的写法
  function gotoA(){
    Router.push({
       pathname:'/parameter',
       query:{
          name:'xxxx'
       }
    })
  }
  return (
    <>
     <Link href='/parameter?name=xxx'></Link>
     <Link href={{pathname:'/parameter',query:{name:'xxxx'}}}></Link>
     <button onClik={gotoA}>点击</button>
    </>
  )
}

路由--钩子事件

当路由发生变化时会触发钩子事件，用到Router的on方法来监听，钩子事件第二个参数为路由参数.

可以通过Router监听路由器内部发生的不同事件

// 监听 Router.events.on('routeChangeStart',handleRouteChange) // 关闭 Router.events.off('routeChangeStart',handleRouteChange)

• 路由开始发生变化时触发(routeChangeStart)

Router.events.on('routeChangeStart',(...args)=>{
  console.log('路由开始变化',...args)
})

• 路由结束变化时触发(routeChangeComplete)

Router.events.on('routeChangeComplete',(...args)=>{
  console.log('路由结束变化',...args)
})

• 在改变浏览器history之前触发(beforeHistoryChange)

Router.events.on('beforeHistoryChange',(...args)=>{
  console.log('浏览器history之前',...args)
})

• 跳转发生错误时触发(routeChangeError)

Router.events.on('routeChangeError',(...args)=>{
  console.log('跳转发生错误',...args)
})

• hash模式路由改变刚开始时触发(hashChangeStart)

Router.events.on('hashChangeStart',(...args)=>{
  console.log('hash模式路由改变刚开始',...args)
})

• hash模式路由改变结束(hashChangeComplete)

Router.events.on('hashChangeComplete',(...args)=>{
  console.log('hash模式路由改变结束',...args)
})