Router does not render children route component.

I'm trying to nest albums from user following the current url:

"/user/$userId/album/$albumId"

"/user/$userId/album/$albumId"

It does navigate, but it does not show the correct component(see the picture), it is stuck in the user pages, and does not show the album page.

Why does this happen?

My router is settled up as follows:

const rootRoute = createRouteConfig({
  component: App,
});

const indexRoute = rootRoute.createRoute({
  path: "/",
  component: Home,
});

const userRoute = rootRoute.createRoute({
  path: "user/$userId",
  component: Profile,
});

const userAlbumRoute = userRoute.createRoute({
  path: "album/$albumId",
  component: Album,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  userRoute.addChildren([userAlbumRoute]),
]);

const router = createReactRouter({ routeConfig });

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

export { userRoute, indexRoute };

export default router;

const rootRoute = createRouteConfig({
  component: App,
});

const indexRoute = rootRoute.createRoute({
  path: "/",
  component: Home,
});

const userRoute = rootRoute.createRoute({
  path: "user/$userId",
  component: Profile,
});

const userAlbumRoute = userRoute.createRoute({
  path: "album/$albumId",
  component: Album,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  userRoute.addChildren([userAlbumRoute]),
]);

const router = createReactRouter({ routeConfig });

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

export { userRoute, indexRoute };

export default router;

Thank you

TanStack•4y ago•

3 replies

clean-aquamarine

Router does not render children route component.

I'm trying to nest albums from user following the current url:

"/user/$userId/album/$albumId"

"/user/$userId/album/$albumId"

const rootRoute = createRouteConfig({
  component: App,
});

const indexRoute = rootRoute.createRoute({
  path: "/",
  component: Home,
});

const userRoute = rootRoute.createRoute({
  path: "user/$userId",
  component: Profile,
});

const userAlbumRoute = userRoute.createRoute({
  path: "album/$albumId",
  component: Album,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  userRoute.addChildren([userAlbumRoute]),
]);

const router = createReactRouter({ routeConfig });

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

export { userRoute, indexRoute };

export default router;

const rootRoute = createRouteConfig({
  component: App,
});

const indexRoute = rootRoute.createRoute({
  path: "/",
  component: Home,
});

const userRoute = rootRoute.createRoute({
  path: "user/$userId",
  component: Profile,
});

const userAlbumRoute = userRoute.createRoute({
  path: "album/$albumId",
  component: Album,
});

const routeConfig = rootRoute.addChildren([
  indexRoute,
  userRoute.addChildren([userAlbumRoute]),
]);

const router = createReactRouter({ routeConfig });

declare module "@tanstack/react-router" {
  interface RegisterRouter {
    router: typeof router;
  }
}

export { userRoute, indexRoute };

export default router;

Thank you

Router does not render children route component.

Similar Threads

Router does not render children route component.

Similar Threads

Similar Threads

Similar Threads