react-router-module

Load React Router route modules from installed packages or other resolvable module paths.

This package helps you build a plugin-style architecture for React Router apps. Each external module exports a route config as its default export, and can optionally export a menu definition that your host app can render in navigation.

Installation

npm install react-router-module

Peer dependencies:

• @react-router/dev@^7
• typescript@^5

What it does

moduleLoader() accepts a list of module specifiers and returns two async helpers:

• getRoutes() resolves each module and returns React Router route entries
• getMenus() returns any exported menu metadata

When a module exports a route file like ./page.tsx, this package rewrites that file path to an absolute path based on the installed module location, so React Router can load it correctly.

Host app usage

import { moduleLoader } from "react-router-module";

const modules = moduleLoader(["teams"]);

export default [
	index("routes/home.tsx"),
	route("/dashboard", "routes/dashboard.tsx"),
	...(await modules.getRoutes()),
] satisfies RouteConfig;

You can also load menus for your sidebar or app navigation:

const menus = await modules.getMenus();

Module authoring

An external module should export:

• a default React Router route config entry
• an optional menu object or menu() function

Example:

import { route } from "@react-router/dev/routes";

export const menu = {
	name: "Teams",
	icon: "users",
	to: "/teams/1",
};

export default route("/teams/:teamId", "./page.tsx");

Menu type

type ModuleMenu = {
	name: string;
	icon?: React.ReactNode | string;
	to: `/${string}`;
};

menu can be either:

• a plain object matching ModuleMenu
• a function returning ModuleMenu

This is useful when menu values need to be computed at load time.

API

moduleLoader(modules: string[])

Creates a lazy loader for one or more route modules.

Parameters:

• modules: package names or other Node-resolvable module specifiers

Returns:

{
	getRoutes: () => Promise<RouteConfigEntry[]>;
	getMenus: () => Promise<ModuleMenu[]>;
}

Notes

• Modules are resolved with Node's require.resolve
• Route file values must be strings
• Child routes are supported and their file paths are also resolved recursively
• The module list is loaded once and shared between getRoutes() and getMenus()

Development

npm run typecheck
npm run build