Nested routes removes animation on RouterOutlet component

Check out my routes:

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    component: Tabs,
    children: [
      {
        path: "",
        redirect: "/surveys",
      },
      {
        path: "surveys",
        component: Surveys,
      },
      {
        path: "settings",
        component: Settings,
      },
      {
        name: "survey",
        path: "/surveys/:surveyid",
        component: SurveyRouterOutlet,
        props: true,
        children: [
          {
            path: "",
            component: Survey,
            props: true,
          },
          {
            path: "components/:componentid",
            component: Component,
            props: true,
          },
          {
            path: "components/new/:type",
            component: Component,
            props: true,
          },
          {
            name: "preview",
            path: "preview/:previewid",
            component: Preview,
            props: true,
          },
        ],
      },
    ],
  },
];

As you can see when I go from /surveys to /surveys/4 for example, there is no animation. If I go from /surveys/4/components/8 I get animation. I believe because I have to use SurveyRouterOutlet it doesn’t quite work the same as going directly to the component. How can this be fixed or how can I have those same routes in a different way?

1 post - 1 participant

Read full topic