Estoy usando react-router v6 con el gancho useRoutes() ( docs ).

Y estoy tratando de agregar transiciones de ruta con react-transition-group .

Probé un montón de cosas diferentes, pero las animaciones simplemente no están limpias y no funcionan para las rutas secundarias: todo el diseño se anima en lugar del elemento secundario.

 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 />; }