T
TanStack•3y ago
like-gold

Router does not render children route component.

I'm trying to nest albums from user following the current url: "/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
No description
2 Replies
like-gold
like-goldOP•3y ago
Following the same logic on react-router I reallized We need to created another index/main component for the path so it behaves also like an index: 
import { lazy } from "react";
import { createBrowserRouter } from "react-router-dom";

import App from "./App";
import Home from "./pages/Home/Home";

const Album = lazy(() => import("./pages/User/Album"));
const Profile = lazy(() => import("./pages/User/Profile"));

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "user/:userId",
        element: <App />,
        children: [
          { index: true, element: <Profile /> },
          { path: "album/:albumId", element: <Album /> },
        ],
      },
    ],
  },
]);

export default router;
import { lazy } from "react";
import { createBrowserRouter } from "react-router-dom";

import App from "./App";
import Home from "./pages/Home/Home";

const Album = lazy(() => import("./pages/User/Album"));
const Profile = lazy(() => import("./pages/User/Profile"));

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: "user/:userId",
        element: <App />,
        children: [
          { index: true, element: <Profile /> },
          { path: "album/:albumId", element: <Album /> },
        ],
      },
    ],
  },
]);

export default router;
So, in this case, what would be the best way to nest routes in tanstack/react-router?
eager-peach
eager-peach•3y ago
I think the best way to go about this is to have the userRoute just contain an <Outlet />, and then create a userIndexRoute that actually renders the Profile component. Let both userIndexRoute and userAlbumRoute be children of userRoute.

Did you find this page helpful?