路由

标签

import react, { Component } from 'react'
import Link from 'next/link'
export default class Index extends Component {
  render() {
    return (
      <div>
        <Link href={{ pathname: '/request/request', query: { name: 'Zeit' } }}>Link带参数</Link>
        <br />
        <Link href="./request/request">Link路由</Link>
      </div>
    )
  }
}

• pathname 路径
• query get参数

命令式

import react, { Component } from 'react'
import Router from 'next/router'
export default class Index extends Component {
  navManager() {
    Router.push('/request/request')
  }
  render() {
    return (
      <div>
        <button onClick={this.navManager}>here</button>
        <button onClick={() => Router.push('/request/request')}>here</button>
      </div>
    )
  }
}

路由事件钩子

• routeChangeStart(url) - 路由开始切换时触发
• routeChangeComplete(url) - 完成路由切换时触发
• routeChangeError(err, url) - 路由切换报错时触发
• beforeHistoryChange(url) - 浏览器 history 模式开始切换时触发
• hashChangeStart(url) - 开始切换 hash 值但是没有切换页面路由时触发
• hashChangeComplete(url) - 完成切换 hash 值但是没有切换页面路由时触发

import react, { Component } from 'react'
import Router from 'next/router'
const handleRouteChange = () => {
  console.log("handleRouteChange")
}
Router.events.on('routeChangeStart', handleRouteChange)    //在路由发生变化时候调用
export default class Index extends Component {
  navManager() {
    Router.push('/request/request')
  }
  render() {
    return (
      <div>
        <button onClick={this.navManager}>here</button>
      </div>
    )
  }
}