下载插件

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:<App />,
        children:[
            {
                path:'/login',
                element:<Login />
            },
            {
                path:"/home",
                element:<Home />
            }
        ]
    },
    
   
])
 
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 (
    <div>
      <TransitionGroup className='transition_wrapper' style={{ width: "100%", height: "100%" }}>
        <CSSTransition key={useLocation().pathname} unmountOnExit timeout={2000} classNames='animate'>
          <Outlet></Outlet>
        </CSSTransition>
      </TransitionGroup>

    </div>
  );
}

export default App;

实现效果