关于React路由鉴权的操作

1 在react项目中 我们会遇到有部分的路由需要用户进行登录之后，才可以进行访问。这时候我们

就会强制让用户跳转到登录页面，相当于vue的路由前置守卫一样， 那么我们要如何去做呢？

答： 解决办法封装一个高阶组件，用于路由权限的判断。

         高阶组件的参数是一个路由的组件，返回值还是一个路由。

        import  {Navigate} from 'react-router-dom'

        function WithRouter（{children}）{  
                
                const token = loaclhost.getItem('token')
                
                if(token) { 

                        return <>{children}<>

                 }else{
                        
                        return <Navigate to='/login' replate></Navigate>
                }
                
        }

        路由中使用

        const routes = createbrowseRouter（[
                
                path:'/home',
                
                element:<WithRouter> <Home><Home> <WithRouter>
        ]）