react动态渲染路由，判断用户权限，判断用户是否登录，判断路由重定向

最新推荐文章于 2024-07-13 09:42:15 发布

ygx_work

最新推荐文章于 2024-07-13 09:42:15 发布

阅读量3.6k

点赞数 2

分类专栏： react 文章标签： react 前端

本文链接：https://blog.csdn.net/ygx_work/article/details/105906066

版权

本文介绍了在React应用中如何动态渲染路由，并实现用户权限判断和登录状态检查，以及未授权时的重定向操作。主要分为三个步骤：首先在APP主文件配置路由，接着创建路由数据文件，最后编写具体的路由组件。

摘要由CSDN通过智能技术生成

第一步，在APP主文件中做如下配置

import {
   HashRouter} from 'react-router-dom'//引入哈希路由
import routerList from './router/index'//路由数据文件
import PrivateRoute from './component/PrivateRoute/PrivateRoute'//路由组件
function App() {
   
  return (
    <div className="App">
      <HashRouter>
        <PrivateRoute routerList={
   routerList}/>
      </HashRouter>
    </div>
  );
}

第二步，书写路由数据文件

export default [
    {
   
        path:'/',
        name:'Login',
        redirect:'/Login',
        meta:{
   require:false}
    },
    {
   
        path:'/Login',
        name:'Login',
        component:Login,
        meta:{
   require:false}
    },
    {
   
        path:'/Main',
        name:'Main',
        redirect: