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. 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'.

The fix: reference the route object directly instead of passing a string.

const params = useParams({ from: groupItemRoute.id })

This way TypeScript infers the correct params type from the route definition, and you don't have to guess the internal ID format.