react路由封装配合懒加载

第一步： 在src下建立一个routes文件 里面写入两个js文件

第二步：　建立一个FrontendAuth.js  文件里写入

 

import * as React from 'react';
import { Route,Redirect } from 'react-router-dom';

export class FrontendAuth extends React.Component{
    render(){
        const { location,config } = this.props;
        const { pathname } = location;
        const isLogin = localStorage.getItem('name')
        // 如果该路由不用进行权限校验，登录状态下登陆页除外
        // 因为登陆后，无法跳转到登陆页
        // 这部分代码，是为了在非登陆状态下，访问不需要权限校验的路由
        // const targetRouterConfig = config.find((v) => v.path === pathname);
       
        const l = pathname.split('/')[1]
        const targetRouterConfig = config.find((v) => v.path.indexOf(l) != -1) 
        if(targetRouterConfig && !targetRouterConfig.auth && !isLogin){
            const { component } = targetRouterConfig;
            return <Route exact path={pathname} component={component} />
        }
        if(isLogin){
            // 如果是登陆状态，想要跳转到登陆，重定向到主页
            if(pathname === '/login'){
                return <Redirect to='/' />
            }else{
                // 如果路由合法，就跳转到相应的路由
                if(targetRouterConfig){
                    return <Route path={pathname} component={targetRouterConfig.component} />
                }else{
                    // 如果路由不合法，重定向到 404 页面
                    return <Redirect to='/404' />
                }
            }
        }else{
            // 非登陆状态下，当路由合法时且需要权限校验时，跳转到登陆页面，要求登陆
            if(targetRouterConfig && targetRouterConfig.auth){
                return <Redirect to='/login' />
            }else{
                // 非登陆状态下，路由不合法时，重定向至 404
                return <Redirect to='/404' />
            }
        }
    }
}

第三步  建立router.config.js写入   配合懒加载 

Path 路径  component 组件名  auth  路由鉴权

 

//懒加载
import loadable from '../util/loadable'

//route
const Login = loadable(()=>import('../views/routeDemo/Login'));
const Error = loadable(()=>import('../views/error/Error'))
export const routerConfig = [
    // 默认在登录页面
    { path:'/' , component: Login , auth:true },
    { path:'/login' , component:Login },
    //错误页面
    { path:'/404', component:Error },
];

 

　　

第四步： App.js引入

import { HashRouter as Router,Route,Link,Redirect,NavLink,Switch,} from 'react-router-dom'

////路由鉴权的配置
import { FrontendAuth } from './routes/FrontendAuth'
import { routerConfig } from './routes/router.config'

export default class App extends React.Component {

  render () {

    return (

      <div className="App">

        <Router>

          <Switch>

            <FrontendAuth config={ routerConfig } />

          </Switch>

        </Router>

      </div>

    );

  }

 

}