I am using react-router v6 with the useRoutes()
hook (docs).
And I am trying to add route transitions with react-transition-group
.
I tried a bunch of different stuff, but the animations are just not clean and dont work for the child routes - the whole layout animates rather than the child.
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 />;
}