react实现路由跳转动画

下载插件

npm i react-transition-group

配置路由

import { createBrowserRouter as ReactRouter,Navigate } from "react-router-dom";
 
import App from '../App.js'
import Login from "../view/login.js";
import Home from "../home.js";
const router = ReactRouter([
    {
        path:"/",
        element:,
        children:[
            {
                path:'/login',
                element:
            },
            {
                path:"/home",
                element:
            }
        ]
    },
    
   
])
 
export default router

app组件中引入并使用

import React from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import router from './router';
import { Outlet } from 'react-router-dom'
import { useLocation } from 'react-router-dom'
import './aa.scss'
const App = () => {
  return (
    

      
        
          
        
      

    
  );
}

export default App;

实现效果