React Router

https://reactrouter.com/
Admin
React Router is a powerful, multi-strategy routing library for React applications, enabling...
Tokens:253,693
Snippets:2,242
Trust Score:9.7
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install dependencies and start development server

Source: https://reactrouter.com/start/framework/installation

Navigates to the created project directory, installs dependencies, and launches the development server on http://localhost:5173.

```shellscript
cd my-react-router-app
npm i
npm run dev
```

--------------------------------

### Start the development server

Source: https://reactrouter.com/tutorials/address-book

Installs application dependencies and launches the local development server on http://localhost:5173.

```shellscript
# cd into the app directory
cd {wherever you put the app}

# install dependencies if you haven't already
npm install

# start the server
npm run dev
```

--------------------------------

### Install @react-router/serve

Source: https://reactrouter.com/api/other-api/serve

Installs the `@react-router/serve` package using npm.

```sh
npm install @react-router/serve
```

--------------------------------

### Initialize project and install dependencies manually

Source: https://reactrouter.com/tutorials/quickstart

Create a project directory, initialize package.json, and install core React Router runtime and dev dependencies.

```shellscript
mkdir my-react-router-app
cd my-react-router-app
npm init -y

# install runtime dependencies
npm i react-router @react-router/node @react-router/serve isbot react react-dom

# install dev dependencies
npm i -D @react-router/dev vite
```

--------------------------------

### Install @remix-run/file-storage

Source: https://reactrouter.com/how-to/file-uploads

Installs the file-storage package to enable key/value storage for File objects on the server.

```shellscript
npm i @remix-run/file-storage
```

--------------------------------

### Start server with react-router-serve CLI

Source: https://reactrouter.com/api/other-api/serve

Runs the React Router App Server by specifying the server build output path.

```sh
react-router-serve <server-build-path>
# e.g.
react-router-serve build/index.js
```

--------------------------------

### Configure client entry point in src/main.tsx (before upgrade)

Source: https://reactrouter.com/upgrading/router-provider

Standard client entry setup using createRoot and RouterProvider with a createBrowserRouter instance before migrating.

```tsx
import React from "react";
import ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";
import App from "./App";

const router = createBrowserRouter([
  // ... route definitions
]);

ReactDOM.createRoot(
  document.getElementById("root")!,
).render(
  <React.StrictMode>
    <RouterProvider router={router} />;
  </React.StrictMode>,
);
```

--------------------------------

### Start development server with npm

Source: https://reactrouter.com/new

Starts the local development server with Hot Module Replacement (HMR). The application will be accessible at http://localhost:5173.

```bash
npm run dev
```

--------------------------------

### Install @remix-run/form-data-parser

Source: https://reactrouter.com/how-to/file-uploads

Installs the form-data-parser package to provide streaming support for request.formData().

```shellscript
npm i @remix-run/form-data-parser
```

--------------------------------

### Install the React Router Vite plugin

Source: https://reactrouter.com/upgrading/component-routes

Install @react-router/dev as a development dependency.

```shellscript
npm install -D @react-router/dev

```

--------------------------------

### Existing index.html entry point example

Source: https://reactrouter.com/upgrading/component-routes

Represents a typical Vite static HTML entry point containing the mounting div and script tag prior to migrating to React Router.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0"
    />
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
```

--------------------------------

### Install @react-router/node runtime adapter

Source: https://reactrouter.com/upgrading/component-routes

Install the Node runtime adapter package for React Router.

```shellscript
npm install @react-router/node

```

--------------------------------

### Install React Router with npm

Source: https://reactrouter.com/start/declarative/installation

Install the react-router package from npm into your application.

```shellscript
npm i react-router
```

--------------------------------

### Serve the production build with react-router-serve

Source: https://reactrouter.com/tutorials/quickstart

Starts the production server using @react-router/serve with the generated server bundle. Serves the application on http://localhost:3000.

```shellscript
npx react-router-serve build/server/index.js
```

--------------------------------

### Add dev and start scripts to package.json

Source: https://reactrouter.com/tutorials/quickstart

Configure the npm scripts to run the server in development mode and production mode using cross-env.

```jsonc
{
  "scripts": {
    "dev": "node ./server.js",
    "start": "cross-env NODE_ENV=production node ./server.js",
  },
  // ...
}
```

--------------------------------

### Install Express and React Router Express adapter

Source: https://reactrouter.com/tutorials/quickstart

Installs express, @react-router/express, and cross-env while removing @react-router/serve.

```shellscript
npm i express @react-router/express cross-env

# not going to use this anymore
npm uninstall @react-router/serve
```

--------------------------------

### Start the Express server

Source: https://reactrouter.com/tutorials/quickstart

Runs the React Router application using Node.js and the custom Express server file.

```shellscript
node server.js
```

--------------------------------

### Defining a full route tree with route parameters

Source: https://reactrouter.com/api/data-routers/createBrowserRouter

Shows an example full route tree containing static, dynamic, and child routes before dynamic route discovery is applied.

```tsx
// Assume this is the full route tree for your app
const routes = [
  {
    path: "/",
    Component: Home,
  },
  {
    id: "blog",
    path: "/blog",
    Component: BlogLayout,
    children: [
      {\n        path: "new", Component: NewPost },
      { path: ":slug", Component: BlogPost },
    ],
  },
];
```

--------------------------------

### Serve SPA Fallback Using sirv-cli

Source: https://reactrouter.com/how-to/pre-rendering

Starts sirv-cli targeting build/client with the appropriate single-page fallback file depending on whether the root route was pre-rendered.

```sh
# If you did not pre-render the `/` route
sirv-cli build/client --single index.html

# If you pre-rendered the `/` route
sirv-cli build/client --single __spa-fallback.html
```

--------------------------------

### Example change file naming formats

Source: https://reactrouter.com/community/contributing

Demonstrates the naming format `<type>.<short-description>.md` used for change files created under `packages/<package>/.changes/`. Change files are generated via `pnpm run changes:add` (requires Node 24+) for user-facing changes.

```sh
patch.fix-fetcher-redirects.md
minor.add-some-new-api.md
major.require-node-24.md
unstable.update-unstable-api.md
```

--------------------------------

### Add dev script and boot the app

Source: https://reactrouter.com/upgrading/router-provider

Add the React Router dev CLI command to package.json scripts and run the development server to verify the migration.

```json
"scripts": {
  "dev": "react-router dev"
}
```

```shellscript
npm run dev
```

--------------------------------

### Install @react-router/fs-routes package

Source: https://reactrouter.com/how-to/file-route-conventions

Installs the @react-router/fs-routes package to enable file-convention based route configuration.

```shellscript
npm i @react-router/fs-routes
```

--------------------------------

### Create the app directory and root route file

Source: https://reactrouter.com/tutorials/quickstart

Initializes the application directory structure and creates the root route file.

```shellscript
mkdir app
touch app/root.jsx
```

--------------------------------

### Initialize project using create-react-router CLI

Source: https://reactrouter.com/tutorials/quickstart

Run the create-react-router CLI command to quickly bootstrap a batteries-included project from a starter template.

```shellscript
npx create-react-router@latest
```

--------------------------------

### Install Vite RSC Dependencies

Source: https://reactrouter.com/how-to/react-server-components

Install development dependencies required for configuring React Server Components with Vite.

```shellscript
npm i -D vite @vitejs/plugin-react @vitejs/plugin-rsc
```

--------------------------------

### Organize server-only directories

Source: https://reactrouter.com/api/framework-conventions/server-modules

Shows how to designate an entire folder as server-only by naming it `.server/`.

```text
app/
├── .server/               👈 entire directory is server-only
│   ├── auth.ts
│   ├── database.ts
│   └── email.ts
├── components/
└── root.tsx
```

--------------------------------

### Bootstrap a React Application with Vite

Source: https://reactrouter.com/start/declarative/installation

Initialize a new React application template using Vite.

```shellscript
npx create-vite@latest
```

--------------------------------

### Install project dependencies using npm

Source: https://reactrouter.com/new

Installs the required package dependencies for the React Router application template.

```bash
npm install
```

--------------------------------

### Install React Router v8 packages

Source: https://reactrouter.com/upgrading/v7

Install the latest version of React Router for either data/declarative mode or framework mode.

```shellscript
# data/declarative mode
npm install react-router@latest

# framework mode
npm install react-router@latest @react-router/{dev,node,etc.}@latest
```

--------------------------------

### Create route configuration and component files

Source: https://reactrouter.com/upgrading/component-routes

Creates the required files for setting up React Router Vite routes and a catchall component.

```shellscript
touch src/routes.ts src/catchall.tsx
```

--------------------------------

### URL with Query Parameters on GET Submission

Source: https://reactrouter.com/tutorials/address-book

React Router serializes FormData into URLSearchParams for GET forms rather than sending data in a POST request body.

```text
http://localhost:5173/?q=ryan
```

--------------------------------

### Handle GET and other HTTP methods in a resource route

Source: https://reactrouter.com/how-to/resource-routes

Handle GET requests using `loader` and non-GET requests (POST, PUT, PATCH, DELETE) using `action`.

```tsx
import type { Route } from "./+types/resource";

export function loader(_: Route.LoaderArgs) {
  return Response.json({ message: "I handle GET" });
}

export function action(_: Route.ActionArgs) {
  return Response.json({
    message: "I handle everything else",
  });
}
```

--------------------------------

### Reveal the server entry file

Source: https://reactrouter.com/how-to/error-reporting

Run this command to create the default `entry.server.tsx` file in your app directory if it is not already present.

```shellscript
react-router reveal entry.server
```

--------------------------------

### Reference path pattern with static optional segment

Source: https://reactrouter.com/changelog

Displays an example path containing an optional static segment.

```ts
// original: /products/:id/detail?
```

--------------------------------

### Set up a signup route and form component

Source: https://reactrouter.com/how-to/form-validation

Defines the route configuration in app/routes.ts and a basic form component in signup.tsx using fetcher.Form for submission.

```ts
import {
  type RouteConfig,
  route,
} from "@react-router/dev/routes";

export default [
  route("signup", "signup.tsx"),
] satisfies RouteConfig;
```

```tsx
import type { Route } from "./+types/signup";
import { useFetcher } from "react-router";

export default function Signup(_: Route.ComponentProps) {
  let fetcher = useFetcher();
  return (
    <fetcher.Form method="post">
      <p>
        <input type="email" name="email" />
      </p>

      <p>
        <input type="password" name="password" />
      </p>

      <button type="submit">Sign Up</button>
    </fetcher.Form>
  );
}
```

--------------------------------

### Backend Signup Handler

Source: https://reactrouter.com/explanation/state-management

Example backend endpoint performing server-side validation and returning error or success responses.

```tsx
export async function signupHandler(request: Request) {
  const errors = await validateSignupRequest(request);
  if (errors) {
    return { ok: false, errors: errors };
  }
  await signupUser(request);
  return { ok: true, errors: null };
}
```

--------------------------------

### Build the application for production

Source: https://reactrouter.com/tutorials/quickstart

Builds the app for production, creating build/server and build/client output folders with build artifacts.

```shellscript
npx react-router build
```

--------------------------------

### Create and configure Express server in server.js

Source: https://reactrouter.com/tutorials/quickstart

Creates server.js and sets up an Express application using createRequestHandler to serve the build output.

```shellscript
touch server.js
```

```javascript
import { createRequestHandler } from "@react-router/express";
import express from "express";

const app = express();
app.use(express.static("build/client"));

// notice that your app is "just a request handler"
app.use(
  createRequestHandler({
    // and the result of `react-router build` is "just a module"
    build: await import("./build/server/index.js"),
  }),
);

app.listen(3000, () => {
  console.log("App listening on http://localhost:3000");
});
```

--------------------------------

### Hydrate client using unstable_getRSCStream

Source: https://reactrouter.com/api/rsc/getRSCStream

Get the prerendered RSC stream to pass directly into createFromReadableStream for client hydration with RSCHydratedRouter.

```tsx
import { startTransition, StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import {
  unstable_getRSCStream as getRSCStream,
  unstable_RSCHydratedRouter as RSCHydratedRouter,
} from "react-router";
import type { unstable_RSCPayload as RSCPayload } from "react-router";

createFromReadableStream(getRSCStream()).then(
  (payload: RSCServerPayload) => {
    startTransition(async () => {
      hydrateRoot(
        document,
        <StrictMode>
          <RSCHydratedRouter {...props} />
        </StrictMode>,
        {
          // Options
        }
      );
    });
  }
);
```

--------------------------------

### Create React Router project with Custom Express Server template

Source: https://reactrouter.com/start/framework/deploying

Initializes a React Router application with Tailwind CSS and a custom Express server for additional server control.

```shell
npx create-react-router@latest --template remix-run/react-router-templates/node-custom-server
```

--------------------------------

### Create a router with createBrowserRouter

Source: https://reactrouter.com/start/data/custom

Initializes a browser router with route objects supporting loaders and components for use in a custom bundler setup.

```tsx
import { createBrowserRouter } from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      {
        path: "shows/:showId",
        Component: Show,
        loader: ({ request, params }) =>
          fetch(`/api/show/${params.showId}.json`, {
            signal: request.signal,
          }),
      },
    ],
  },
]);
```

--------------------------------

### Generate entry.client.tsx using react-router reveal

Source: https://reactrouter.com/api/framework-conventions/entry.client.tsx

Reveals the default client entry file if custom client-side hydration or setup is needed.

```shellscript
npx react-router reveal
```

--------------------------------

### Generate template with create-react-router

Source: https://reactrouter.com/tutorials/address-book

Scaffolds a basic starter template configured with CSS and data models for the address book tutorial.

```shellscript
npx create-react-router@latest --template remix-run/react-router/tutorials/address-book
```

--------------------------------

### Update to latest React Router v7 packages

Source: https://reactrouter.com/upgrading/v7

Installs the latest v7 minor release packages prior to enabling future flags.

```sh
npm install react-router@7 @react-router/{dev,node,etc.}@7
```

--------------------------------

### Create and configure vite.config.js

Source: https://reactrouter.com/tutorials/quickstart

Create the Vite configuration file and register the reactRouter plugin from @react-router/dev/vite.

```shellscript
touch vite.config.js
```

```javascript
import { reactRouter } from "@react-router/dev/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [reactRouter()],
});
```

--------------------------------

### Define routes using flat file naming conventions

Source: https://reactrouter.com/how-to/file-route-conventions

Demonstrates a standard flat file route structure in the `app/routes/` directory. Route hierarchy and segment behaviors are defined strictly by file names.

```text
 app/
├── routes/
│   ├── _landing._index.tsx
│   ├── _landing.about.tsx
│   ├── _landing.tsx
│   ├── app._index.tsx
│   ├── app.projects.tsx
│   ├── app.tsx
│   └── app_.projects.$id.roadmap.tsx
└── root.tsx
```

--------------------------------

### Create and configure root.tsx entry point

Source: https://reactrouter.com/upgrading/component-routes

Replace index.html by creating src/root.tsx. This file exports a Layout component containing the HTML document shell with Links, Meta, Scripts, and ScrollRestoration, as well as a default Root component rendering an Outlet.

```shellscript
touch src/root.tsx
```

```tsx
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "react-router";

export function Layout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <meta charSet="UTF-8" />
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0"
        />
        <title>My App</title>
        <Meta />
        <Links />
      </head>
      <body>
        {children}
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

export default function Root() {
  return <Outlet />;
}
```

--------------------------------

### Serve RSC Framework Mode build with Express in start.js

Source: https://reactrouter.com/how-to/react-server-components

Convert the default request handler exported from build/server/index.js into a standard Node.js request listener using createRequestListener from @remix-run/node-fetch-server.

```tsx
import express from "express";
import requestHandler from "./build/server/index.js";
import { createRequestListener } from "@remix-run/node-fetch-server";

const app = express();

app.use(
  "/assets",
  express.static("build/client/assets", {
    immutable: true,
    maxAge: "1y",
  }),
);
app.use(express.static("build/client"));
app.use(createRequestListener(requestHandler));
app.listen(3000);
```

--------------------------------

### Debug Express server using the Node.js inspect flag

Source: https://reactrouter.com/tutorials/quickstart

Starts the server with the --inspect flag to inspect and debug the app using Chrome DevTools.

```shellscript
node --inspect server.js
```

--------------------------------

### Create a React Router app with create-react-router

Source: https://reactrouter.com/start/framework/installation

Initializes a new React Router project using the default basic template.

```shellscript
npx create-react-router@latest my-react-router-app
```

--------------------------------

### Read request headers in a route loader

Source: https://reactrouter.com/how-to/headers

Access standard Web Fetch Headers methods like get and has directly from the incoming request in a route loader.

```tsx
export async function loader({
  request,
}: Route.LoaderArgs) {
  // Standard Headers methods are available
  const userAgent = request.headers.get("User-Agent");
  const hasCookies = request.headers.has("Cookie");

  // ...
}
```
Tokens:
Raw