react-router

High-level mental model, install, import pattern, and feature scope of @mongez/react-router — a configuration-based singleton router (routes as data, one wrapper render path). TRIGGER when: code imports `router`, `Router`, `Link`, `navigateTo`, `setApps`, `setRouterConfigurations`, `routerEvents`, `queryString`, or `NAVIGATING` from `@mongez/react-router`; user asks "how does @mongez/react-router work", "how do I set up the router", "what's router.scan", "how does this compare to react-router-dom or @tanstack/router"; `import router from "@mongez/react-router"` or `import { ... } from "@mongez/react-router"`. SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the file imports from `react-router`, `react-router-dom`, `@tanstack/router`, or Next.js routing; specific topics (route registration, link/navigation, params, locale, lazy-loading, recipes) — use the matching `mongez-react-router-*` skill instead.

URL parameter extraction, the `queryString` API, custom `urlMatcher`, and swapping the query string parser in @mongez/react-router. TRIGGER when: code imports `queryString`, `setQueryStringOptions`, `UrlMatcher`, or `QueryStringOptions` from `@mongez/react-router`, reads `router.params` / `params.id` in a page or middleware, calls `queryString.all`, `queryString.parse`, `queryString.get`, `queryString.toString`, `queryString.toQueryString`, or `queryString.update`, or sets `urlMatcher` / `queryString` keys via `setRouterConfigurations`; user asks "how do I read route params", "how do I read/update the query string", "how do I plug in `qs` or `path-to-regexp`"; `import queryString from "@mongez/react-router"`. SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the file uses `useParams` / `useSearchParams` from `react-router-dom`; registering paths with dynamic segments — use `mongez-react-router-routes`; locale segment parsing — use `mongez-react-router-localization`; native

End-to-end recipes composing multiple @mongez/react-router features: auth guards, return-to redirects, language switchers, analytics, scroll restoration, loading bars, URL-driven filters, per-route Suspense, and route-driven data with `@mongez/react-atom`. TRIGGER when: code wires `routerEvents.onNavigating` / `.onPageRendered` for analytics, scroll restoration, or a loading bar; uses `currentRoute`, `previousRoute`, `NavigationMode` to scope side effects; combines `navigateTo` + `NAVIGATING` + `queryString.get` for an auth `return-to` redirect; sets `suspenseFallback`; pairs the router with `fetchingAtom` from `@mongez/react-atom`; user asks "auth-gate a section", "track pageviews", "URL-driven pagination", "keep scroll on back/forward". SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the project uses `react-router-dom` loaders/`useNavigation`; single-concept questions answered by another skill — locale switching → `mongez-react-router-localization`, `<Link>` props → `mo

Code-splitting via apps and modules, module manifests, loader wiring, loading UI, and chunk-error recovery in @mongez/react-router. TRIGGER when: code calls `setApps`, configures `lazyLoading` (`loaders.app` / `loaders.module`, `loadingComponent`, `renderOverPage`, `chunkErrorHandler`) via `setRouterConfigurations`, references `App`, `PublicApp`, `Module`, `Loaders`, `LazyLoadingOptions`, `LazyLoadingProps`, `ChunkErrorHandler`, or `ChunkErrorStrategy`, writes a `*-modules.json` manifest, or listens to `routerEvents.onChunkLoadError`; user asks "how do I lazy-load modules", "configure app/module loaders", "show a loading spinner over the previous page", "recover from chunk-load errors after a deploy". SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the file uses bare `React.lazy` + `<Suspense>` without `@mongez/react-router` apps/modules, or `react-router`'s `loader`/`lazy` route options; registering individual routes — use `mongez-react-router-routes`; per-route `suspens

Locale-prefixed URLs (`/en/admin/users`), runtime language switching, and locale-detection configuration in @mongez/react-router. TRIGGER when: code imports `changeLocaleCode`, `shouldAppendLocaleCodeToUrl`, `LocalizationOptions`, or `ChangeLanguageReloadMode` from `@mongez/react-router`, sets `localization` (`defaultLocaleCode`, `localeCodes`, `changeLanguageReloadMode`), `appendLocaleCodeToUrl`, or `autoRedirectToLocaleCode` via `setRouterConfigurations`, reads `router.getCurrentLocaleCode()` or the `localeCode` prop, renders `<Link localeCode=...>`, or listens to `routerEvents.onLocaleChanging` / `.onLocaleChanged` / `.onDetectingInitialLocaleCode`; user asks "how do I add a language prefix to URLs", "how do I switch language at runtime", "soft vs hard locale reload". SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the project uses `react-i18next` / `next-intl` routing without `@mongez/react-router`; translation message catalogs (this skill only covers URL/locale plumb

Declarative `<Link>` and imperative helpers (`navigateTo`, `navigateBack`, `silentNavigation`, `refresh`) in @mongez/react-router, plus prefetch-on-hover, click interception, and the `NAVIGATING` sentinel. TRIGGER when: code imports `Link`, `navigateTo`, `navigateBack`, `silentNavigation`, `refresh`, `NAVIGATING`, `currentRoute`, `previousRoute`, `currentApp`, `getHash`, `LinkProps`, or `LinkOptions` from `@mongez/react-router`; user asks "how do I link/navigate", "how does prefetch on hover work", "what does `silent` do", "open a Link in a new tab", "how is navigateBack different from `history.back()`", "what is `NAVIGATING` for"; JSX uses `<Link to=...>` from `@mongez/react-router`. SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the file uses `<Link>`/`useNavigate` from `react-router-dom` or `next/link`; registering routes/middleware — use `mongez-react-router-routes`; locale-prefixed paths and `changeLocaleCode` — use `mongez-react-router-localization`; query string u

Registering routes, dynamic segments, groups, layouts, middleware, and not-found handling in @mongez/react-router. TRIGGER when: code calls `router.add`, `router.group`, `router.partOf`, `router.list`, references `Route`, `RouteOptions`, `GroupedRoutesOptions`, `Middleware`, `MiddlewareProps`, `NAVIGATING`, or configures `notFound` via `setRouterConfigurations`; user asks "how do I register a route", "how do I add middleware", "how do dynamic segments work (`:id`, `:id?`, `:path+`, `:path*`)", "how do I share a layout across routes", "how do I handle 404s"; `import router from "@mongez/react-router"` followed by `router.add(...)`. SKIP: this is @mongez's router, distinct from upstream `react-router-dom` — skip when the file uses `<Route>`/`<Routes>` JSX from `react-router-dom`; `<Link>`, `navigateTo`, prefetch, and imperative navigation — use `mongez-react-router-navigation` instead; locale prefixing — use `mongez-react-router-localization`; lazy-loaded module providers — use `mongez-react-router-lazy-loading