useLinkClickHandler available modes
useLinkClickHandler is available in framework, data, and declarative modes.
React Router · API · all subjects
framework-conventions
102 notes in this subject, read out of this brain and free to use. This is page 2 of 2.
useSubmit works in framework and data modes
useSubmit is available in both framework mode and data mode.
Server adapters purpose and design
React Router adapts the server's request/response to the Web Fetch API through adapters. These adapters are imported into your server's entry point and are not used inside the React Router app itself. Official adapters include @react-router/architect, @react-router/cloudflare, and @react-router/express. Each adapter has the same API, though some have platform-specific options.
Node version support policy
React Router officially supports all Active LTS versions of Node and the latest minor line of Maintenance LTS versions. When security patches are released for maintenance lines, minimum supported versions may be bumped in a React Router minor release. Dropping support for EOL Node major versions is always done in a React Router major release.
Migrating from React Router App Server to Express
To migrate from @react-router/serve to @react-router/express: (1) Uninstall @react-router/serve and install @react-router/express, compression, express, morgan, cross-env, and dev dependencies @types/express, @types/express-serve-static-core, @types/morgan; (2) Create server/app.ts with createRequestHandler importing 'virtual:react-router/server-build'; (3) Copy server.js boilerplate to run the TypeScript Express server; (4) Update vite.config.ts to add rollupOptions with input './server/app.ts' when isSsrBuild is true; (5) Update package.json scripts to use node server.js with NODE_ENV=development and --conditions development for dev script.
react-router typegen command
The 'react-router typegen' command generates TypeScript types for routes. This happens automatically during development but can be run manually in CI or when needed. Available flags are: --config/-c (string), --mode/-m (string), --watch (boolean, default false).
Hot Data Revalidation (HDR)
HDR is a hot update mechanism that re-fetches data from loaders when code changes, keeping the app up-to-date without requiring a page refresh. It complements HMR (Hot Module Replacement) by handling server-side code updates while HMR handles client-side code updates like component, markup, and style changes.
react-router reveal command
The 'react-router reveal' command generates entry.client.tsx and entry.server.tsx files in the app directory, allowing control over application entry points. React Router uses these files when present instead of defaults. Available flags are: --config/-c (string), --mode/-m (string), --no-typescript (boolean, default false), --typescript (boolean, default true).
react-router dev command flags
The 'react-router dev' command runs the app in development mode with HMR and Hot Data Revalidation (HDR), powered by Vite. Available flags are: --clearScreen (boolean), --config/-c (string), --cors (boolean), --force (boolean, ignores cache and re-bundles), --host (string), --logLevel/-l ("info" | "warn" | "error" | "silent" | string), --mode/-m (string), --open (boolean | string, opens browser on startup), --port (number), --profile (starts built-in Node.js inspector), --strictPort (boolean, exits if port is already in use).
react-router build command flags
The 'react-router build' command builds the app for production with Vite and sets process.env.NODE_ENV to production. Available flags are: --assetsInlineLimit (number, default 4096), --clearScreen (boolean), --config/-c (string), --emptyOutDir (boolean), --logLevel/-l ("info" | "warn" | "error" | "silent" | string), --minify (boolean | "terser" | "esbuild", default "esbuild"), --mode/-m (string), --profile (starts built-in Node.js inspector), --sourcemapClient (boolean | "inline" | "hidden", default false), --sourcemapServer (boolean | "inline" | "hidden", default false).
@react-router/dev CLI package
The React Router CLI comes from the @react-router/dev package and should be listed in package.json devDependencies so it does not get deployed to the server. Run 'npx @react-router/dev -h' to see all available commands and flags.
unstable_RSCHydratedRouter is experimental API
The unstable_RSCHydratedRouter API is experimental and subject to breaking changes in minor or patch releases. Users should use it with caution and pay very close attention to release notes for relevant changes.
HOST environment variable for @react-router/serve
Configure the hostname for the Express app via process.env.HOST. This value is passed to the internal app.listen method. Example: HOST=127.0.0.1 npx react-router-serve build/index.js
@react-router/serve package installation
Install @react-router/serve with npm install @react-router/serve.
@react-router/serve CLI command
Run the React Router App Server with the command react-router-serve <server-build-path>, where server-build-path points to the serverBuildPath defined in react-router.config.ts. Example: react-router-serve build/index.js
@react-router/serve is a basic Node.js Express server
@react-router/serve is a production-ready but basic Node.js server built with Express. It uses compression, express.static (and serve-static), and morgan middlewares by default. It does not provide customization options; if customization is needed, migrate to @react-router/express instead.
PORT environment variable for @react-router/serve
Change the port of the @react-router/serve server with the PORT environment variable. Example: PORT=4000 npx react-router-serve build/index.js
@react-router/serve development mode behavior
In development mode (when process.env.NODE_ENV is set to development), @react-router/serve purges the require cache for every request to ensure the latest code is run. This causes module scope values to be reset on each request. Module side effects will remain in place and may cause problems.
@react-router/serve development mode module scope reset pitfall
In development, any values defined in module scope (like a const cache = new Map()) will be reset for every request because the module cache is cleared and the module is required anew. If you need to preserve cache in development, set up a singleton in your server.
@react-router/serve development mode side effects pitfall
In development, module side effects (like setInterval or other code that runs when a module is imported) will persist even though module scope values are reset. If your code has module side effects, set up your own @react-router/express server with a development tool like pm2-dev or nodemon to restart the server on file changes instead.
@react-router/serve production mode behavior
In production mode, the @react-router/serve server boots up once and that is the end of it. The require cache is not purged for every request.
unstable_createCallServer is experimental
unstable_createCallServer is an experimental API that is subject to breaking changes in minor or patch releases. It should be used with caution and developers should pay close attention to release notes for relevant changes.
RSC in React Router
RSC (React Server Components) support in React Router is currently unstable and marked as such in the API documentation. The feature is ordered as item 7 in the API reference.
unstable_getRSCStream API stability warning
This API is experimental and subject to breaking changes in minor and patch releases. Users should use it with caution and pay close attention to release notes for relevant changes.
unstable_routeRSCServerRequest is experimental API
unstable_routeRSCServerRequest is an experimental API subject to breaking changes in minor/patch releases. Users should use with caution and pay close attention to release notes for relevant changes.
unstable_matchRSCServerRequest is experimental
unstable_matchRSCServerRequest is an experimental API subject to breaking changes in minor and patch releases. It should be used with caution and developers should pay close attention to release notes for relevant changes.
IsSessionFunction parameter: object
The object parameter is the value to check. It accepts any type.
IsSessionFunction type signature
IsSessionFunction is a type that represents a function with the signature `(object: any) => object is Session`. It takes a single parameter of any type and returns a boolean indicating whether the value is a React Router Session object.
IsSessionFunction return value
IsSessionFunction returns true if the value is a React Router Session object; otherwise it returns false.
IsSessionFunction purpose
IsSessionFunction is a type guard function that determines whether a value is a React Router Session object.
isCookie modes
isCookie is available in framework and data modes.
Lazy Route Discovery overview
Lazy Route Discovery is a performance optimization that loads route information progressively as users navigate through an application, rather than loading the complete route manifest upfront. With Lazy Route Discovery enabled (the default), React Router sends only the routes needed for the initial server-side render in the manifest. As users navigate to new parts of the application, additional route information is fetched dynamically and added to the client-side manifest.
Route manifest contents
The route manifest contains metadata about routes (JavaScript/CSS imports, whether routes have loaders/actions, etc.) but not the actual route module implementations. This allows React Router to understand the application's structure without downloading unnecessary route information.
Route Discovery Process steps
When a user navigates to a new route that isn't in the current manifest, the following occurs: 1) Route Discovery Request - React Router makes a request to the internal /__manifest endpoint, 2) Manifest Patch - The server responds with the required route information, 3) Route Loading - React Router loads the necessary route modules and data, 4) Navigation - The user navigates to the new route.
Eager route discovery with Link and NavLink
All Link and NavLink components rendered on the current page are automatically discovered via a batched request to the server. This discovery request typically completes before users click any links, making subsequent navigation feel synchronous even with lazy route discovery enabled.
Lazy Route Discovery performance benefits
Lazy Route Discovery provides several performance improvements: 1) Faster Initial Load - Smaller initial bundle size by excluding unused route metadata, 2) Reduced Memory Usage - Route information is loaded only when needed, 3) Scalability - Applications with hundreds of routes see more significant benefits.
Lazy route discovery deployment considerations
When using lazy route discovery, ensure your deployment setup handles manifest requests properly. Ensure /__manifest requests reach your React Router handler. If using CDN/edge caching, include version and paths query parameters in your cache key for the manifest endpoint. If running multiple React Router applications on the same domain, use a custom manifestPath.
Action function signature
An action function receives a parameter object with a request property of type Request. The signature is: export async function action({ request }: Route.ActionArgs). The request object provides methods like formData() to extract submitted form data.
HTTP status code 400 prevents revalidation
In React Router, only 2xx status codes trigger page data revalidation after an action completes. Sending a 400 (Bad Request) status code from an action prevents the normal revalidation that would occur, allowing validation errors to be displayed without reloading data.
Error reporting modes supported
Error reporting in React Router is available in framework mode and data mode. Server error reporting (handleError) is only available in framework mode. Client error reporting (onError on HydratedRouter or RouterProvider) is available in both modes.
RSC support is experimental and available in both Framework and Data modes
React Server Components (RSC) support in React Router is experimental and subject to breaking changes in minor and patch releases. RSC support is available in both Framework Mode and Data Mode. Users should pay close attention to release notes for relevant changes.
.server/.client modules not built-in for RSC Framework Mode
Support for .server modules and .client modules is no longer built-in when using RSC Framework Mode to avoid confusion with RSC's "use server" and "use client" directives. As an alternative, use the "server-only" and "client-only" imports provided by @vitejs/plugin-rsc. The official npm packages server-only and client-only do not need to be installed; @vitejs/plugin-rsc internally handles these imports.