Expose Route ID programatically

[sergiodxa]

Right now, the ID of the route where some piece of code is running is never exposed to the code, you can find references in the list of matches, but you don't know your current ID.

In Remix this the route ID was not something you could control usually as it was not common to use config-based router in Remix config, so you could hard-code it.

Since React Router's routes.ts is more common to use config-based routes, and in some cases the same route file can be used for multiple routes with different IDs, making it impossible to know the current route ID.

Proposal for Middleware, Loader and Action

Add a routeId argument to middleware, loader and action functions.

export const middleware = [
  async ({ request, params, context, routeId }, next) => {
    console.log("Current route ID:", routeId);
    return await next();
  },
] satisfies Route.MiddlewareFunction[];

export async function loader({
  request,
  params,
  context,
  routeId,
}: Route.LoaderArgs) {
  console.log("Current route ID:", routeId);
}

export async function action({
  request,
  params,
  context,
  routeId,
}: Route.ActionArgs) {
  console.log("Current route ID:", routeId);
}

This routeId argument should be typed as an union of every ID this route may receive in the route configuration. This means if a route module is only used once it could be a literal like routes/dashboard but if the route is used with multiple ids it could be a union like routes/dashboard | routes/admin.

Note

A similar thing could be add to the equivalent client version of these functions, I only use the server ones here but consider it for all.

Examples

Logging

// app/middleware/logger.ts
const logger = createContext<Logger>();
const loggerMiddleware: MiddlewareFunction<Response> = async (
  { context, routeId },
  next
) => {
  // Instantiate logger with dynamic routeId
  context.set(logger, new Logger(routeId));
  return await next();
};

// this will create a logger instance for this route
// you can add it on every route where you use it
export const middleware = [loggerMiddleware];

export async function action({ context }: Route.ActionArgs) {
  try {
    return await doSomething();
  } catch (error) {
    context.get(logger).error(error); // log error, with routeId attached
  }
}

Internationalization

export async function loader({ context, routeId }: Route.LoaderArgs) {
  let t = context.get(i18n).getFixedT(routeId); // here routeId is the i18n namespace

  return {
    meta: [{ title: t("title") }],
  };
}

Proposal for Components

Similarly, the route ID can be exposed to components via Route.ComponentProps.

export default function Component({ routeId }: Route.ComponentProps) {
  return <div>Current route ID: {routeId}</div>;
}

Like with the routeId in loader/action/middleware functions, this routeId should be a union of every ID this route may receive in the route configuration.

Examples

This can be useful to filter the current route from a list of matches:

let matches = useMatches();
// Get every other route match
let otherRouteMatches = matches.filter((m) => m.route.id !== routeId);
// Get the relative route matches by index
let routeMatchIndex = matches.findIndex((m) => m.route.id === routeId);
let childRouteMatch = matches.at(routeMatchIndex + 1);
let parentRouteMatch = matches.at(routeMatchIndex - 1);

This could also be used for i18n as in loaders/actions when using it with libraries like react-i18next:

let { t } = useTranslation(routeId);
return <h1>{t("title")}</h1>;

For this, it will be important that routeId is strongly typed as these libs like react-i18next can have the namespaces also strongly typed which strongly type the translation keys, by receiving a strongly typed routeId the t function will know which keys are actually supported by every possible route namespace file.

useRouteId Hook

Additionally to the routeId in the route component props, it could be useful to also expose a useRouteId hook.

import { useRouteId } from "react-router";

export function NonRouteComponent() {
  let routeId = useRouteId();
  return <div>Current route ID: {routeId}</div>;
}

This can be useful for cases where you don't want a strictly typed version of the route ID and simply receiving a string is sufficient. The example for the matches could work here too.