Why does the useParams hook use the route's id instead of its path?

[bac1lla]

I'm using code-based routing with nested routes:

export const groupItemRoutePath = '/path';

const groupRoute = createRoute({id: 'id', getParentRoute: () => rootRoute});
const groupItemRoute = createRoute({
  path: groupItemRoutePath,
  getParentRoute: () => groupRoute,
});

rootRoute.addChildren([groupRoute.addChildren([groupItemRoute])]);

Calling useParams in a component using the path will throw an error:

useParams({from: groupItemRoutePath});

useParams internally uses the route's id, not its path. When using nested routes, the id is generated based on the parent route's id and the child route's path. Because of this, it becomes impossible to reuse route path constants—you have to either import the route and use its id or search through router.routesByPath. Is this the expected behavior? It would be good if this were mentioned in the documentation

[travisbreaks]

In code-based routing, the from option in useParams expects the route's full route ID, not its URL path. This is by design.

When a pathless parent has a custom id (e.g. id: 'id'), the child route's full ID becomes a combination of the parent ID and the child path. For your setup the child route ID would be 'id/path' — not '/path'.

Fix: use the route object directly

The most type-safe approach is to reference the route object's .id property instead of a string constant:

// Works — uses the actual computed route ID, TypeScript infers params correctly
useParams({ from: groupItemRoute.id })

Or export the ID instead of the path:

// Define once
export const groupItemRoute = createRoute({ path: groupItemRoutePath, getParentRoute: () => groupRoute })
export const GROUP_ITEM_ROUTE_ID = groupItemRoute.id  // inferred as '"id/path"'

// Use everywhere
useParams({ from: GROUP_ITEM_ROUTE_ID })

Why not from: routePath?

The from parameter needs a unique route identifier that accounts for where in the route tree the route lives — the same path segment can appear at different positions with different params. Using .id over .path is intentional: it anchors the hook to the specific route instance.

The docs mention this in the Route IDs section, but agreed it's worth a clearer callout in the useParams docs.