React-Router V6：如何在使用 useRoutes() 挂钩时添加转换

Question

我正在使用带有钩子的react-router v6 useRoutes()（文档）。

我正在尝试添加路线转换react-transition-group。

我尝试了很多不同的东西，但动画并不干净，并且不适用于子路线 - 整个布局动画而不是子路线。

export const App = () => {
  const routes: RouteObject[] = [
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        {
          path: "/courses",
          element: <Courses />,
          children: [
            { index: true, element: <CoursesIndex /> },
            { path: "/courses/:id", element: <Course /> },
          ],
        },
        { path: "*", element: <NoMatch /> },
      ],
    },
  ];

  const element = useRoutes(routes);
  const location = useLocation()

  return (
    <TransitionGroup>
      <CSSTransition
        key={location.key}
        classNames="slide"
        timeout={1000}
      >
        {element}
      </CSSTransition>
    </TransitionGroup>
  );
}

export const Layout = () => {
  return <Outlet />;
}