Allow route module export id #4983
Replies: 3 comments 7 replies
-
I like this idea, and Remix could throw on build if there’s a duplicated ID. |
Beta Was this translation helpful? Give feedback.
-
I like this idea. In my usecase is I like to colocate the 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 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 This means
|
Beta Was this translation helpful? Give feedback.
-
Same here. The auto-generated route id is not very refactor-friendly. Recently I use remix-routes function 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',
},
] |
Beta Was this translation helpful? Give feedback.
-
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:
ReactRouter allows you to define a custom id for each route, as described in the docs:
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:
Beta Was this translation helpful? Give feedback.
All reactions