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 · API · all subjects

router creation & setup

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

.react-router/ directory should be gitignore'd

React Router generates types into a .react-router/ directory at the root of your app. This directory is fully managed by React Router and should be added to .gitignore.

tsconfig.json configuration for generated types

Edit tsconfig.json to include generated types by adding .react-router/types/**/* to the include array and configuring rootDirs with both . and ./.react-router/types. This allows types to be imported as relative siblings to route modules. If using multiple tsconfig files, make these changes in the one that includes the app directory.

Generate types before type checking in CI

When running type checking as its own command, such as in a Continuous Integration pipeline, run react-router typegen before running type checking. For example, configure npm scripts as: "typecheck": "react-router typegen && tsc".

React Router Vite plugin auto-generates types

React Router's Vite plugin automatically generates types into .react-router/types/ anytime you edit your route config (routes.ts). Running react-router dev (or a custom dev server) ensures up-to-date types are available in your routes.

typegen command

The react-router typegen command manually generates types for routes. It can be run with --watch flag to automatically regenerate types as files change. If react-router dev is running or a custom server calls vite.createServer, the Vite plugin automatically generates up-to-date types without needing to run typegen manually.

Root entry point requires root.tsx with Layout and Outlet

The React Router Vite plugin uses a root.tsx file as the app entry point instead of index.html. This file must export a Layout component that accepts children and renders the HTML shell with Meta, Links, ScrollRestoration, and Scripts components. It should also export a default component that renders Outlet. The Layout component will be statically generated and served as the entry point, so it must be compatible with server rendering.

Client entry point uses entry.client.tsx with HydratedRouter

The client entry module must be named src/entry.client.tsx. It should use ReactDOM.hydrateRoot instead of createRoot and render HydratedRouter from 'react-router/dom' within React.StrictMode. This replaces the typical Vite setup that uses BrowserRouter and index.html.

React Router Vite plugin configuration in react-router.config.ts

The react-router.config.ts file configures the React Router Vite plugin. It must satisfy the Config type from '@react-router/dev/config'. It can specify appDirectory (where the app source is located), ssr (whether to enable server-side rendering, defaults to false), and prerender (an async function that returns an array of paths to statically pre-render).

Vite plugin setup with reactRouter instead of react plugin

In vite.config.ts, replace the '@vitejs/plugin-react' import and plugin with 'reactRouter' from '@react-router/dev/vite'. The reactRouter plugin is called without arguments in the plugins array.

Prerequisites for React Router Vite plugin

The React Router Vite plugin requires Node.js 22.22.0 or higher and Vite 7 or Vite 8.

Install React Router Vite plugin and runtime adapter

Install '@react-router/dev' as a dev dependency with 'npm install -D @react-router/dev'. Install '@react-router/node' as a runtime dependency with 'npm install @react-router/node' for Node.js runtime.

SSR and prerender configuration example

SSR is enabled by setting 'ssr: true' in react-router.config.ts. Pre-rendering is enabled by providing an async prerender function that returns an array of path strings to statically generate, such as ['/about', '/contact']. SSR requires deploying the server build to a server.

React Router config file location and structure

The react-router.config.ts file contains configuration for React Router. It exports a Config object that can include an async prerender() function specifying URLs to pre-render during the production build.

Give your agent this brain