在react react-router-domV6 中使用路由懒加载和路由动画效果而造成的问题

import { lazy } from 'react'
import { Navigate } from 'react-router-dom'
import { AuthRoute } from '../components/AuthRoute'
// 懒加载路由需要放到普通路由最下面
import NotFound from '../pages/notFound'
import Login from '../pages/Login'
import Layout from '../pages/Layout'
import Books from '../pages/Layout/books'
import Shelf from '../pages/Layout/shelf'
// const Login = lazy(() => import('../pages/Login'))
// const Layout = lazy(() => import('../pages/Layout'))
// const Books = lazy(() => import('../pages/Layout/books'))
// const Shelf = lazy(() => import('../pages/Layout/shelf'))
const routerList = [
  { path: '/', element: <Navigate to="/home" /> },
  { path: '/login', element: <AuthRoute><Login /></AuthRoute> },
  {
    path: '/home', element: <AuthRoute><Layout></Layout></AuthRoute>, children: [
      { index: true, element: <Navigate to="books" /> },
      { path: 'books', element: <Books /> },
      { path: 'shelf', element: <Shelf /> },
    ]
  },
  { path: '*', element: <NotFound /> }
]
export default routerList

import { useLocation, useRoutes } from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group'
import routerList from './router'
function App() {
  let location = useLocation();
  let router = useRoutes(routerList, location);
  return (
    <div className="App">
      {/* <Suspense fallback={
        <div
          style={{
            textAlign: 'center',
            marginTop: 200
          }}
        >
          loading...
        </div>
      }> */}
      {/* 使用路由懒加载会造成，在刷新完页面后进行第一次跳转页面，旧页面不消失的问题 */}
      {/*  */}
      <TransitionGroup >
        <CSSTransition key={location.key} timeout={1000} classNames="fds">
          {router}
        </CSSTransition>
      </TransitionGroup>
      {/* </Suspense> */}
    </div>
  );
}
export default App;