路由@5

  </Router>
)

} }

<a name="UDOc1"></a>
### 高阶组件形式
> components/AuthRoute/index.js

```jsx
// 1. 判断token是否存在
// 2. 如果存在 直接正常渲染
// 3. 如果不存在 重定向到登录路由

// 高阶组件:把一个组件当成另外一个组件的参数传入 然后通过一定的判断 返回新的组件
import { getToken } from '@/utils'
import { Navigate } from 'react-router-dom'

function AuthRoute ({ children }) {
  const isToken = getToken()
  if (isToken) {
    return <>{children}</>
  } else {
    return <Navigate to="/login" replace />
  }
}

// <AuthComponent> <Layout/> </AuthComponent>
// 登录：<><Layout/></>
// 非登录：<Navigate to="/login" replace />

export {
  AuthRoute
}

src/router/index.js

import { AuthRoute } from './components/AuthRoute'
<Routes>
  {/* 需要鉴权的路由 */}
  <Route path="/" element={
      <AuthRoute>
        <Layout />
      </AuthRoute>
    }>
  </Route>
  {/* 不需要鉴权的路由 */}
  <Route path='/login' element={<Login />} />
</Routes>

lazyLoad - 按需加载 -v16.6以上

run build时会单独生成js和css文件，点击路由导航时才会在newwork加载

1. import {lazy,Suspense} from 'react'

2. <Suspense fallback={}>

   import React , {Component,lazy,Suspense} from 'react'
   //1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包
    const Login = lazy(()=>import('@/pages/Login'))
   
    //2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面
   {/* <Suspense fallback={<Loading/>}> */} //可以导入一个Loading组件作为fallback
    <Suspense fallback={<h1>loading.....</h1>}>
    <Switch>
      <Route path="/xxx" component={Xxxx}/>
      <Redirect to="/login"/>
    </Switch>
   </Suspense>
   

   withRouter 将非路由组件转为路由组件

3. withRouter可以加工一般组件，让一般组件具备路由组件所特有的API

4. withRouter的返回值是一个新组件 ```jsx import React, { Component } from ‘react’ import {withRouter} from ‘react-router-dom’

class Header extends Component { go = ()=>{ this.props.history.go(-2) }

render() {
    console.log('Header组件收到的props是',this.props);
    return (
        <div className="page-header">
            <button onClick={this.go}>go</button>
        </div>
    )
}

} //props 具有history是可以使用路由功能 export default withRouter(Header) ```

BrowserRouter与HashRouter的区别

1.底层原理不一样：
(1).BrowserRouter使用的是H5的history API，不兼容IE9及以下版本。
ps:this.props中的history是react封装的 不是H5中的
(2).HashRouter使用的是URL的哈希值。相当于锚点
不会发给服务器但又能形成历史记录，所以可以使用history的API实现前进后退。