React-router

路由

1. 安装
   4.x（推荐）
   yarn add react-router-dom
   3.x
   yarn add react-router

2. 两种模式( HashRouter / BrowserRouter )
   1.老版本的 HashRouter ：通过 hash 存储不同状态的 history 信息，对应 createHashHistory ，通过检测 location.hash 值的变化，使用 location.replace 方法实现 url 跳转。通过注册监听 window对象上的 hashChange 事件来监听路由变化，实现历史记录的回退
   2.高版本浏览器的 BrowserRouter：利用 HTML5 里的 history 对应 createBrowerHistory，使用包括 pushState，replaceState 方法进行跳转。通过注册 window 对象上的 popstate 事件来监听路由变化，实现回退
   需要后端支持

3. 实现：
   <Route path=" / " component={ Home }>：路由展示区
   exact：路由完全匹配

路由在入口文件使用 Router 包裹路由组件
index.js

1.引入 HashRouter 
import {HashRouter as Router} from 'react-router-dom'

2. 包裹需要路由的根组件。注意如果有 Provider 是 provider 包裹路由
ReactDOM.render(
<Router>	//包裹
  <App />
</Router>, document.getElementById('root'));

App.js

import { NavLink,Route,Link } from 'react-router-dom'
function App() {
  return (
    <div className="App">
      <nav className="nav justify-content-center">
        <NavLink activeclassName="active" className="nav-link active" to="/home">Home </NavLink >
        <NavLink activeclassName="active" className="nav-link" to="/mine">Mine</NavLink >
        <NavLink activeclassName="active" className="nav-link disabled" to="/list">List</NavLink >
      </nav>
       Route 就是路由展示区
      <Route path="/home" component={Home}></Route>
      <Route path="/mine" component={Mine}></Route>
      <Route path="/list" component={List}></Route>
    </div>
  );
}

3. a标签也可以，但是浏览器会显示一次跳转的状态，就是浏览器的刷新按钮在转圈圈
4. < Link to=" " >标签可以避免 a 标签的问题。
5. to属性可以接受字符串，也可以接受一个对象

to={{
  pathname:'xxx',
  search:`?name=${name}`
}}

7. <NavLink>用来路由激活的标签，除此之外与 Link 没什么区别，添加 activeClassName 属性可以实现动态样式

重定向

重定向

exact 路由完全匹配，避免’/’ 被所有匹配到

1.引入 Redirect
import { Redirect,Route } from 'react-router-dom'

第一种：
<Route path="/" exact render={()=>(<Redirect to='home' />)} />
注意：必须加上 exact ，否则造成死循环

第二种：
<Route path="/" from='' to='' exact />
注意：使用 from='' to='' 需要在外边加上switch

第三种：（此方法取巧）
<Route path="/" component={ Home } exact />

路由激活：

import { NavLink } from 'react-router-dom'
<NavLink activeClassName = "active" className=""  />

路由传参

路由组件的props上具备几个属性

history
  push
  replace
  goBack
location
  pathname
  search
  state
match

push会存进浏览器历史中 replace 不会存入历时记录中

传递：
to={{ pathName:'/mine/login',search:'?a=1&b=2', state:{count:1}  }}

二级路由

二级路由与一级路由大致相同，在子路由中再添加路由展示区<Route path='' component={xx}>即可

错误匹配

高阶组件

问题：为什么Vue有导航守卫监听路由变化，react为什么没有

路由动画

https://reactcommunity.org/react-transition-group/css-transition

vue中6个类名
react 9个类名
yarn add animate.css
yarn add react-transtore-froup
组件内

import {  } from 'react-traxxn-group'
class FCategory extends React.Component{
  constructor(){
    super()
    this.state={
      flag:true
    }
    changeFlag=()=>{
    }
    render(){
      return(
        <CSSTransiton
          in={ this.state.flag }
          timeout=
          className={{
            enter:'',
            enterActive:'',
            exit:'',
            exitActive:'',
          }}
      )
    }
  }

]