如何在完成css路由跳转动画样式的同时完成umi路由鉴权？

具体解决步骤

1、在src的目录下，和page同级，新建一个wrappers文件夹（这个名称是固定的），在文件夹下新建 Auth.tsx文件，

2、在文件里面的写入以下内容：

import {Redirect} from 'umi'
export default function Auth(props:any) {
//获取本地缓存 localStorage的值
  const isLogin = localStorage.getItem('role')
//如果这个值存在就返回正常内容
  if(isLogin){
    return (
      <div>
        {props.children}
      </div>
    );
  }else {
  //如果这个值存在就重定向到登录页
    console.log('跳登录')
      return (  <Redirect to='/login' />)
  }
}

3、在配置路由的地方加上 wrappers: [‘@/wrappers/auth’]，需要拦截的都必须添加，如图

4.在完成路由鉴权之后，接下来就是来完成css动画路由跳转

在src目录下创建layouts文件夹，并在文件夹下创建两个文件

在index.less文件中复制如下代码

.in-enter-active{  // 入场的过渡状态类
  transition: all 3s;
  transform: translate(0, 0)!important;
}
 
.in-enter-done { // 入场的动画的结束状态类
    // opacity: 0.5;
    transform: translate(0, 0) !important;
}
 
.in-enter {  // 入场的动画开始状态类
  z-index: 5 !important;
  transform: translate(100%, 0);
}
 
.in-exit-active {    // 离场动画
    opacity:0;
    transition: all 3s;
    transform: translate(-100%, 0)!important;
}
 
.in-exit {  // 离场动画开始
    // transform: translate(0, 0)!important;
}
.in-exit-done { // 离场动画结束
 
}
 
// 返回动画
.back-enter-active{  // 入场的过渡状态类
    transition: all 3s;
    transform: translate(0, 0)!important;
  
  }
.back-enter-done { // 入场的动画的结束状态类
    // opacity: 0.5;
    transform: translate(0, 0) !important;
}
 
.back-enter {  // 入场的动画开始状态类
    z-index: 5 !important;
    transform: translate(-100%, 0);
}
  
.back-exit-active {    // 离场动画
    opacity:0;
    transition: all 3s;
    transform: translate(100%, 0)!important;
}
 
.back-exit {  // 离场动画开始
    // transform: translate(0, 0)!important;
}
.back-exit-done { // 离场动画结束
 
}

在index.tsx文件中复制如下代码

import React, { useState, useEffect } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { history as Router, withRouter } from 'umi'
import { Switch } from 'react-router'
import './index.less'
 
const routerType = {
        'POP': 'back',
        'PUSH': 'in',
        'REPLACE': 'in'
    }
 
export default withRouter(({ location, children, history }) => {
return (
   <TransitionGroup style={{height:'100%'}} className='transition_wrapper' childFactory={(child) => (
         React.cloneElement(child, { classNames: routerType[history.action] })
   )}>
      <CSSTransition key={location.pathname} appear timeout={3000}>
         <Switch location={location}>{(children as any)?.props?.children}</Switch>
      </CSSTransition>
    </TransitionGroup>
)
})

在pages文件中创建自己需要的页面,页面中需要体现路由跳转

页面1：home.jsx

import React from 'react'
import { history } from 'umi'
import './index1.less'
// import { FloatButton } from 'antd'

export default function Home() {
  return (
    <div>
      home页面
      <button onClick={() => { history.push('/index') }}>跳转到index页面</button>
    </div>
  )
}

页面2：index.tsx

import './index1.less'
import { history } from 'umi';


export default function Index() {
  return (
    <div className='index'>
      index
      <button onClick={() => { history.push('/home') }}>跳转到home页面</button>
    </div>
  );
}

样式：index.less

.index,#root,.home{
    height: 100%;
}
.index{
    background-color: pink;
}
.home{
    background-color: antiquewhite;
}

将umirc.ts文件中配置路由

在我们配置路由的时候切记一定要首先配置css动画样式的文件路径，否则当我们进行路由跳转的时候，是没有路由动画的。接下来就跟我图中一样，就可以直接添加你想添加的文件路由。