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

官方文档：

Overview v6.3.0 | React Router

1. 使用V5版本实现

// 路由导航守卫鉴权
const Authentication = () => {
  const errormessag = () => {
    Toast.success('你没有权限看！')
    return (
       (
          
        )}
      />
    )
  }
  let isShowCompent = true  // 控制权限值到时候可替换成是否有token
  return isShowCompent ? (
    
  ) : (
    errormessag()
  )
}


// 组件配置
 render () {
    return (
    
    
    }

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 // 嵌套传的
  ) : (
     // 跳转到登录
  );
}

ReactDOM.render(
  
    
      }> // 路由嵌套
        } />
         // 拦截组件
             // 被拦截组件
          
        }
        />
      
    
  ,
  document.getElementById('root')
);