Allow route module export id

[andrelandgraf]

I appreciate the new useRouteLoaderData hook from ReactRouter, but working with the auto-generated route ids is a bit painful.

I see two major problems with the auto-generated route ids:

• Auto-generated route ids are not trivial if the route module is heavily nested
• Auto-generated route ids are not robust to changes in the route hierarchy

ReactRouter allows you to define a custom id for each route, as described in the docs:

createBrowserRouter([
  {
    path: "/",
    loader: () => fetchUser(),
    element: <Root />,
    id: "root",
    children: [
      {
        path: "jobs/:jobId",
        loader: loadJob,
        element: <JobListing />,
      },
    ],
  },
]);

This is awesome as it allows you to create easy-to-understand ids that don't change if the route hierarchy changes.

Proposal

ReactRouter lets us define a custom id for a route. This is currently not possible in Remix (as far as I know). Remix could add a named id export to create custom ids.

Example:

export const id = "root"

export const loader() {
   // loader function
}

export default function Component() {
   // route component
}

[sergiodxa]

I like this idea, and Remix could throw on build if there’s a duplicated ID.

[kiliman]

Interesting. But currently, route ids are generated during the route configuration before it looks at the actual route files. I guess it's possible to update the ids once Remix inspects the files while generating the manifest.

[cliffordfajardo]

@andrelandgraf - I haven't used the custom route id's before, what are some potential use cases?

[kiliman]

By default, route ids are based on the filename. You would typically use a route id to find the specific route from useMatches. useMatches().find(m => m.id === routeId)

Remix was updated recently so you can specify a route id during configuration via the routes config in remix.config. This lets you create multiple routes that use the same route file. Previously this wasn't possible since ids were always based on the filename.

@andrelandgraf is asking for the ability to specify the route id from inside the actual route file, in order to override the filename-based id.

This is useful when you want to match a route by using a more meaningful name than the filename and one that won't change if you move the file.

[nivekithan]

I like this idea.

In my usecase is I like to colocate the customHook which calls useRouteLoaderData in the route file iteself. Since I get typesafety too

export const loader = ({ params }: LoaderArgs) => {
  const { teamId } = paramsSchema.parse(params);

  return json({ channels: [{ id: "1", name: "1" }], teamId });
};

export const useChannelData = () => {
  const routeLoaderData = useRouteLoaderData("routes/$teamId/") as
    | SerializeFrom<typeof loader>
    | undefined;

  return routeLoaderData?.channels;
};

This breaks evey time I move my file.

Ability to set customRouteId solves this issue. But it creates a new issue, that is what to name the route and somehow keep it filename indpendent so that I can move my file without changing the customRouteId.

Which I think is diffcult when there are lot of routes especially in deep nested routes.

So I would like to purpose new way for the route file to get currentRouteId like node's __dirname.

This means

1. My customHook won't break every time I change my filename/layout
2. I don't have to figure out correct customRouteId for eveny single route,

[nivekithan]

Not sure whether it is possible or not. But if the team likes the idea, I can help with PR too

[kiliman]

Perhaps instead of trying to find a route match by id, it would be better to use handle which is already exported.

export const handle = 'channelData'

export const loader = ({ params }: LoaderArgs) => {
  const { teamId } = paramsSchema.parse(params);

  return json({ channels: [{ id: "1", name: "1" }], teamId });
};

export const useChannelData = () => {
  const routeLoaderData = useMatches().find(m => m.handle === handle)?.data as
    | SerializeFrom<typeof loader>
    | undefined;

  return routeLoaderData?.channels;
};

[nivekithan]

Great. It definately solves my usecase . Thanks!

But I wish I don't have to name handle too, I prefer somehow getting routeId automatically and then using it in useRouteLoaderData. One less thing to name

[sergiodxa]

There’s a proposal to have a special global constant in route modules always storing the route ID, so you can use ROUTE_ID or something like that inside the route file, and it will put the correct value, useful for your use case of exporting a hook from the route itself.

[undermoonn]

Same here. The auto-generated route id is not very refactor-friendly.

Recently I use remix-routes function $routeId to typecheck route id usage.
I redefined $routeId to make 'custom' route id possible:

import { $routeId as _$routeId, type RouteId } from 'remix-routes'

// Custom route id here
const RouteIdRedefinedMap = {
  Product: 'routes/_3-cols.product.$id._index',
  ProductDetail: 'routes/_3-cols.product.$id.detail',
  ProductReview: 'routes/_3-cols.product.$id.review',
} as const satisfies {
  [key in string]: RouteId
}

type RouteIdRedefined = keyof typeof RouteIdRedefinedMap
type RouteIdNotRedefined = Exclude<
  RouteId,
  (typeof RouteIdRedefinedMap)[RouteIdRedefined]
>
type RouteIdProxied = RouteIdRedefined | RouteIdNotRedefined

export function $routeId(routeIdProxied: RouteIdProxied): RouteId {
  if (Object.hasOwn(RouteIdRedefinedMap, routeIdProxied)) {
    return RouteIdRedefinedMap[routeIdProxied as RouteIdRedefined]
  }
  return routeIdProxied as RouteIdNotRedefined
}

The use case difference:

const tabs = [
  {
-   routeId: $routeId('routes/_3-cols.product.$id._index')
+   routeId: $routeId('Product'),
    path: $path('/product/:id', { id }),
    text: 'Product',
  },
  {
-  routeId: $routeId('routes/_3-cols.product.$id.review'),
+  routeId: $routeId('ProductReview'),
    path: $path('/product/:id/review', { id }),
    text: 'Review',
  },
  {
-   routeId: $routeId('routes/_3-cols.product.$id.detail)
+   routeId: $routeId('ProductDetail'),
    path: $path('/product/:id/detail', { id }),
    text: 'Detail',
  },
]

---