How to infer path params from nested route

[hansyulian]

Hi, i have the following setup:

Router.tsx

const indexRoute = addRoute("/", HomePage);
const adminRoute = createAdminRoute(() => rootRoute);
const catchAllRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: "*",
  component: () => "404 Not Found",
});

const routeTree = rootRoute.addChildren([
  indexRoute,
  // adminRoute,
  ...flattenRoutes(adminRoute), // adminRoute,
  catchAllRoute,
]);
export const router = createRouter({ routeTree });

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

features/Administration/index.tsx

export default function createAdminRoute<TParentRoute extends AnyRoute = AnyRoute>(getParentRoute: () => TParentRoute) {
  const adminRoute = createRoute({
    getParentRoute,
    path: "admin",
  });

  return adminRoute.addChildren([
    createRoleRoute(() => adminRoute)
  ]);
}

features/Administration/Role/index.tsx

export default function createRoleRoute<TParentRoute extends AnyRoute = AnyRoute>(getParentRoute: () => TParentRoute) {
  const roleRoute = createRoute({
    getParentRoute,
    path: "role",
  });

  const listingRoute = createRoute({
    getParentRoute: () => roleRoute,
    path: "/",
    component: RoleListingPage,
  });

  const detailsRoute = createRoute({
    getParentRoute: () => roleRoute,
    path: "/$roleId",
    component: () => {
      const { roleId } = detailsRoute.useParams(); // the linting have issue here
      return <RolePage roleId={roleId} />;
    },
  });

  return roleRoute.addChildren([listingRoute, detailsRoute]);

}

i am unable to get the typing for const { roleId } = detailsRoute.useParams();, any idea?

[schiller-manuel]

can you please provide a minimal complete example e.g. by forking one the examples on stackblitz?

probably you are running into the same issue as this here: #896 (comment)

[hansyulian]

hi, i think that's different.
i created a code snippet here:

https://github.com/hansyulian/questions/tree/main/question-2024-03-19-tanstack-router-1