react路由：编程式导航路由笔记

import React from 'react'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
// ---------------一、编程式导航--------------
  // 场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？
  // 编程式导航： 通过JS代码来实现页面跳转
    // class Login extends React.Component {
    //   handleLogin = () => {
    //     // ....
    //     this.props.history.push('/home')
    //   }
    //   render () {...省略其他代码}
    // }
  // history是react路由提供的，用于获取浏览器历史记录的相关信息
  // push(path):跳转到某个页面，参数path表示要跳转的路径
  // global(n): 前进或者后退到某个页面，参数n表示前进或后退页面数量（比如：-1表示后退到上一页）
  // 2.默认路由：
    // 默认路由：表示进入页面时就会匹配的路由
    // 默认路由path为： /
    // <Route path="/" component={Home}></Route>
  // 3.匹配模式
    // 3.1.模糊匹配模式
      // 模糊匹配模式：由于默认路由是个/,所以当匹配其它路由时也会把默认匹配组件匹配到并进行展示，
      // 模糊匹配规则：只要pathname以path开头机会匹配成功: Link中的to是以'/'开头的，所以能匹配上默认路由
        // 或者说默认路由是'/',Link中的to是以/开头的，所以匹配上了
    // 3.2精确匹配模式
      // 给Router组件添加exact属性，让其变为精确匹配模式
      // 精确匹配：只有当path和pathname完全匹配时才会展示该路由
export default class tabsRouter extends React.Component {
  render () {
    return (
      <Router>
        <div>
          <h1>编程式导航：</h1>
          <Link to="/login">去登录页面</Link>
          {/* 设置Login组件为默认路由 */}
          {/* 默认路由，添加exact属性，就会让当前路由变为精确匹配 */}
          <Route exact path="/" component={Login}></Route>
          <Route path="/login" component={Login}></Route>
          <Route path="/home" component={Home}></Route>
        </div>
      </Router>
    )
  }
}
class Login extends React.Component {
  handleClick = () => {
    // 使用编程式导航实现路由跳转
    this.props.history.push('/home')
  }
  render() {
    return (
      <div>
        <p>登录页面：</p>
        <button onClick={this.handleClick}>登录：</button>
      </div>
    )
  }
}
const Home = (props) => {
  // 函数组件中没有this
  const handleGoBack = () => {
    // go(-1)表示返回上一个页面
    props.history.go(-1)
  }
  return (
    <div>
      <h2>我是后台首页</h2>
      {/* // 下面这行这是第二种方法 */}
      <button onClick={() => {props.history.go(-1)}}>返回登录页面</button>
      {/* <button onClick={handleGoBack}>返回登录页面</button> */}
    </div>
  )
}