new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

React Router · Getting started · all subjects

installation & setup

17 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

appDirectory config option

The appDirectory option specifies the path to the app directory, relative to the root directory. It defaults to 'app'. Can be customized to a different path like 'src'.

buildDirectory config option

The buildDirectory option specifies the path to the build directory, relative to the project. It defaults to 'build'. Can be customized to a different path like 'dist'.

buildEnd config option

The buildEnd option is a function that is called after the full React Router build is complete. It receives an object with buildManifest, reactRouterConfig, and viteConfig properties.

serverModuleFormat config option

The serverModuleFormat option sets the output format of the server build. It defaults to 'esm' and can also be set to 'cjs'.

react-router.config.ts replaces Vite plugin configuration

React Router framework configuration is now defined in a dedicated `react-router.config.ts` file in the root of the project, decoupled from the Vite configuration. The config is exported as a default export and must satisfy the `Config` type from `@react-router/dev/config`.

react-router.config.ts is optional but recommended

The `react-router.config.ts` file is optional and will not be treated as an error if missing. However, it is recommended and included by default in all official templates to make configuration options more discoverable and self-documenting.

Vite plugin no longer accepts config options

The Vite plugin will no longer accept configuration options as an options object. All framework configuration options must be handled through the dedicated `react-router.config.ts` file.

Config changes no longer trigger full dev server reload

Changes to `react-router.config.ts` will no longer trigger a full reload of the dev server. Config updates are handled more gracefully than Vite config changes.

Config APIs exported from @react-router/dev/config

Configuration APIs and types for React Router are exported from the `@react-router/dev/config` namespace, following the established pattern of `@react-router/dev/*` namespaces for dev-time APIs.

CLI commands access config independently of Vite

React Router CLI commands like `react-router routes` and `react-router typegen` can now access framework configuration directly from `react-router.config.ts` without needing to resolve Vite configuration, enabling features like `react-router typegen --watch` with granular config watching capabilities.

Router HMR disposal pattern

When using createBrowserRouter outside the React tree, developers can hook into Hot Module Replacement to properly dispose the router: if (import.meta.hot) { import.meta.hot.dispose(() => router.dispose()); }. This ensures the router is reset during development when code changes.

Remix CLI TypeScript or JavaScript prompt during project creation

When creating a new Remix project via `npx create-remix@latest`, the CLI prompts the user to choose between TypeScript and JavaScript as options after selecting the app type and deployment target.

Remix only supports JS conversion for app code, not scripts outside app directory

Remix converts TypeScript to JavaScript only for code inside the app directory (e.g. `app/`). Scripts and code outside the app directory are not converted, as conversion of code outside the app directory is tricky and error-prone. This includes issues like stale references to `.ts` files and problems with ESM/CJS conversion.

Three options for using JavaScript with Remix

Users have three options when they prefer JavaScript: (1) Use a TypeScript template, (2) Use a TypeScript template with the app directory converted to JavaScript, or (3) Use a dedicated JavaScript template.

Manual conversion of remaining TypeScript to JavaScript

If users want to manually convert remaining TypeScript code after using option 2, they should: remove `tsconfig.json` or replace it with `jsconfig.json`, replace TS-only tools with their JavaScript counterparts (e.g. `ts-node` with `node`), and change remaining `.ts` files to `.mjs` while updating imports and package.json script references to the new filenames.

Remix default language and template maintenance approach

Remix defaults to TypeScript. Instead of maintaining separate template variants for TypeScript and JavaScript (which duplicated template code), Remix maintains only the TypeScript variant of each template and dynamically converts app code to JavaScript when users select the JavaScript option during project creation.

Challenges converting TypeScript code outside app directory to JavaScript

Converting TypeScript to JavaScript outside the app directory faces two main technical challenges: (1) Stale references to `.ts` files remain in scripts and still reference TS-only tools like `ts-node`, and (2) Converting to ESM-style `.mjs` requires reliable file extension handling or converting all imports/exports to CommonJS equivalents, both of which are complex and error-prone.

Give your agent this brain