react如何向vue--beforeEach功能一样做到路由守卫

//不通过react-router-dom进行路由的引用
import {Router} from ‘react-router‘
import { createBrowserHistory } from ‘history‘
//引入封装的路由守卫的方法
import guard from ‘封装路由守卫的路径‘

const history = createBrowserHistory();

//history
//listen: ƒ listen(listener)  监听路由的变化
//replace: ƒ replace(path, state)  替换页面
//push: ƒ push(path, state)   去哪个页面

ReactDOM.render(
    <Provider {...store}>
        <Router history={history}>
            <RouterView routes={myRoutes} />
        </Router>
    </Provider>
    ,
    document.getElementById(‘root‘) as HTMLElement
);

guard(history)

//引入获取获取登录态的方法
import { getToken } from ‘封装的路径‘
import store from ‘仓库地址‘

function guard(history:any){
    //首先进入页面时进行路由守卫的监听
    beforeEach(history)
    const unListen = history.listen((location:object)=>{
        //location产生的属性
        //hash: ""
        //key: "s8ztsq"
        //pathname: "/home/usermanage/usershow"
        //search: ""
        //state: undefined
        beforeEach(history)
    })
}

function beforeEach(history){
    //如果存在登录态的话 我们就可以获取到当前用户的信息
    if(getToken()){
        //分为如果我们有登录态但是没有当前用户信息我们则需要获取到当前的用户信息
        const userInfo:any = store.user.userInfo;
        //Object.keys获取到的是数组 可以通过它来判断当前用户信息是不是存在的
        if(!Object.keys(userInfo).length){
            //获取当前的用户信息
            store.user.getUserInfoUser();
        }
    }else{
        //如果没有登录态的话我们就跳转到登录页面 不可以访问数据
        history.replace(‘/login‘)
    }
}