react-router-dom关于V5以及V6版本实现路由鉴权的控制

官方文档：

Overview v6.3.0 | React Router

1. 使用V5版本实现

// 路由导航守卫鉴权
const Authentication = () => {
  const errormessag = () => {
    Toast.success('你没有权限看！')
    return (
      <Route
        path='/home/map'
        render={() => (
          <Redirect //重定向
            to='/home'
            replace
          />
        )}
      />
    )
  }
  let isShowCompent = true  // 控制权限值到时候可替换成是否有token
  return isShowCompent ? (
    <Route path='/home/map' component={map}></Route>
  ) : (
    errormessag()
  )
}


// 组件配置
 render () {
    return (
    <Route path='/home/consult' component={consult}></Route>
    <Authentication></Authentication>
    }

2. 使用V6版本实现

  注意为啥要用replace

  replace是替换 不然就是push 

 push 会造成 history.go(-1)跑到登录页

['home','login','home']  push 后面添加一个

['home','home']   replace 替换掉

import React from 'react'
import { Navigate } from 'react-router-dom'
import Uername from './commpent/page/Uername/index'
// RequireAuth 组件相当于一个拦截器，是否返回被拦截的组件要听他的
function RequireAuth({ children }) {
  const authed = true

  return authed ? ( // 判断 authed 中登录状态是否为 true
    children // 嵌套传的
  ) : (
    <Navigate to="/user" replace /> // 跳转到登录
  );
}

ReactDOM.render(
  <HashRouter>
    <Routes>
      <Route path="/" element={<App />}> // 路由嵌套
        <Route path="user" element={<User />} />
        <Route path="/homelist" element={
          <RequireAuth> // 拦截组件
            <Uername /> // 被拦截组件
          </RequireAuth>
        }
        />
      </Route>
    </Routes>
  </HashRouter>,
  document.getElementById('root')
);