react基础react-router-dom的基本使用

ReactRouter三大组件：

Router(BorwserRouter/HashRouter)：所有路由组件的根组件（底层组件），包裹路由器的最外层的容器，属性：

basename: 设置跟此路由根路径

Router：路由规则匹配组件，显示当前规则对应的组件

Link：路由跳转的组件

Link的replace属性，点击链接后，将新地址替换成历史访问记录的原地址。

如果要精确匹配，可以在route上设置exact属性。

router分为两种模式：

hash模式  #

import { HashRouter as Router, Link, Router } from 'react-router-dom'

history模式 / 后端匹配使用

import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

  // basename属性，可以使，每个路由前面添加特定的路径
    
     
        {/* 通过url传递参数 */}
         
          {/* 嵌套路由 */}
           {/* 
              
            
      }> */}
     
      {/* Switch用来处理404，错误页面必须在最后面 */}
     
  

Router的basename属性，可以给路由添加特定的属性，

重定向组件：

Redirect

Switch组件：让Switch组件内容的route只匹配1个，只要匹配到了，剩余的路由规则将不再匹配

函数式跳转

this.props.history.push('/', {参数})
this.props.history.replace('/', {参数})
// 前进
this.props.history.go(1)
this.props.history.goForward()
// 回退 
this.props.history.go(-1)
this.props.history.goBack()