React Router Route Object

https://reactrouter.com/start
Admin
Route Objects in React Router define the configuration for individual routes, including components,...
Tokens:29,735
Snippets:232
Trust Score:9.7
Update:10 months ago
Show doc for...
Tokens:
Raw
### Create and Render React Router

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

Demonstrates how to create a browser router using `createBrowserRouter` and render it within the React application using `RouterProvider`. This sets up the basic routing structure for the application, including a root path that renders 'Hello World'.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter } from "react-router";
import { RouterProvider } from "react-router/dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <div>Hello World</div>,
  },
]);

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />,
);

```

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

### Install React Router Package

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

Installs the React Router library using npm, which is essential for implementing routing in React applications. This command adds the 'react-router' package to your project's dependencies.

```bash
npm i react-router
```

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

### Bootstrap React Project with Vite

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

This command bootstraps a new React project using Vite, a popular build tool for frontend development. It provides a quick way to set up a development environment with features like hot module replacement.

```bash
npx create-vite@latest
```

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

### Set up BrowserRouter in React Application

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

This code snippet demonstrates how to wrap your main React application component (`<App />`) with `<BrowserRouter>`. This is a fundamental step for enabling routing in React Router, allowing your application to manage navigation declaratively. It requires React, ReactDOM, and the BrowserRouter component from react-router.

```javascript
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./app";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

```

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

### Example Search URL with Form Component

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

This example shows the resulting URL when a user enters 'journey' into the search input of a Form component with action='/search'. The input's name 'q' becomes the query parameter key.

```plaintext
/search?q=journey

```

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

### Configure Basic Routes in React Router

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

Demonstrates how to set up basic routing in a React application using BrowserRouter, Routes, and Route components. It couples URL segments to UI elements. This example requires the 'react-router-dom' package.

```jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import App from "./app";

const root = document.getElementById("root");

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
    </Routes>
  </BrowserRouter>,
);

```

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

### Authentication Middleware Example

Source: https://reactrouter.com/start/framework/route-module

An example of authentication middleware that checks for a logged-in user using session data. If no user is found, it redirects to the login page. It also sets the user object in the `context` for access in loaders.

```typescript
async function authMiddleware ({ request, context }) => {
  const session = await getSession(request);
  const userId = session.get("userId");

  if (!userId) {
    throw redirect("/login");
  }

  const user = await getUserById(userId);
  context.set(userContext, user);
};

export const middleware = [authMiddleware];

```

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

### Define a Route Module

Source: https://reactrouter.com/start/framework/route-module

Example of defining a route in `routes.ts` which references a route module file (e.g., './team.tsx'). Route modules are fundamental to React Router's features like code-splitting and data loading.

```typescript
route("teams/:teamId", "./team.tsx"),

```

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

### Declarative Mode Setup with BrowserRouter

Source: https://reactrouter.com/start/modes

Sets up basic routing features using the BrowserRouter component. This mode enables URL matching, navigation, and active states. It's suitable for simple routing needs and applications migrating from older versions.

```javascript
import { BrowserRouter } from "react-router";

ReactDOM.createRoot(root).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
);

```

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

### Route Action for Server-Side Data Mutations (JavaScript)

Source: https://reactrouter.com/start/framework/route-module

Enables server-side data mutations with automatic revalidation of all loader data upon completion. Used with `<Form>`, `useFetcher`, and `useSubmit`. The example demonstrates creating a 'Todo' item.

```javascript
// route("/list", "./list.tsx")
import { Form } from "react-router";
import { TodoList } from "~/components/TodoList";

// this data will be loaded after the action completes...
export async function loader() {
  const items = await fakeDb.getItems();
  return { items };
}

// ...so that the list here is updated automatically
export default function Items({ loaderData }) {
  return (
    <div>
      <List items={loaderData.items} />
      <Form method="post" navigate={false} action="/list">
        <input type="text" name="title" />
        <button type="submit">Create Todo</button>
      </Form>
    </div>
  );
}

export async function action({ request }) {
  const data = await request.formData();
  const todo = await fakeDb.addItem({
    title: data.get("title"),
  });
  return { ok: true };
}

```

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

### Combine Server and Client Loaders in React Router

Source: https://reactrouter.com/start/framework/data-loading

This example demonstrates using both a server-side 'loader' and a client-side 'clientLoader' for a product route. The 'loader' fetches product data from a fake database on the server, while 'clientLoader' fetches data from an API and merges it with server-side data for client-side navigations. The component then uses the combined 'loaderData'.

```typescript
// route("products/:pid", "./product.tsx");
import type { Route } from "./+types/product";
import { fakeDb } from "../db";

export async function loader({ params }: Route.LoaderArgs) {
  return fakeDb.getProduct(params.pid);
}

export async function clientLoader({
  serverLoader,
  params,
}: Route.ClientLoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  const serverData = await serverLoader();
  return { ...serverData, ...res.json() };
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;

  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}

```

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

### Use Native Meta and Title Elements (React Router)

Source: https://reactrouter.com/start/framework/route-module

This example demonstrates using native `<title>` and `<meta>` elements directly within a route component. This approach is recommended since React 19, offering a more straightforward way to manage meta tags compared to the `meta` export.

```javascript
export default function MyRoute() {
  return (
    <div>
      <title>Very cool app</title>
      <meta property="og:title" content="Very cool app" />
      <meta
        name="description"
        content="This app is the best"
      />
      {/* The rest of your route content... */}
    </div>
  );
}
```

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

### Data Mode Setup with createBrowserRouter

Source: https://reactrouter.com/start/modes

Implements Data Mode for advanced routing features, including data loading, actions, and pending states. It uses `createBrowserRouter` to define routes with loaders and integrates with React's data fetching mechanisms. This mode offers more control over data management.

```javascript
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";

let router = createBrowserRouter([
  {
    path: "/",
    Component: Root,
    loader: loadRootData,
  },
]);

ReactDOM.createRoot(root).render(
  <RouterProvider router={router} />,
);

```

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

### Route Object Component Rendering in React Router

Source: https://reactrouter.com/start/data/route-object

Illustrates how the `Component` property within a Route Object is used to specify the React component that should be rendered when a particular route matches. Includes a functional component example.

```javascript
createBrowserRouter([
  {
    path: "/",
    Component: MyRouteComponent,
  },
]);

function MyRouteComponent() {
  return (
    <div>
      <h1>Look ma!</h1>
      <p>
        I'm still using React Router after like 10 years.
      </p>
    </div>
  );
}
```

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

### Optimistic UI Update with Fetcher

Source: https://reactrouter.com/start/framework/pending-ui

This example demonstrates how to implement an optimistic UI update for a task status change. It uses `useFetcher` to predict the UI state based on form submission data before the actual server response, providing an instant update to the user.

```javascript
function Task({ task }) {
  const fetcher = useFetcher();

  let isComplete = task.status === "complete";
  if (fetcher.formData) {
    isComplete =
      fetcher.formData.get("status") === "complete";
  }

  return (
    <div>
      <div>{task.title}</div>
      <fetcher.Form method="post">
        <button
          name="status"
          value={isComplete ? "incomplete" : "complete"}
        >
          {isComplete ? "Mark Incomplete" : "Mark Complete"}
        </button>
      </fetcher.Form>
    </div>
  );
}
```

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

### Server-Side Request Logging Middleware

Source: https://reactrouter.com/start/framework/route-module

An example of a server-side middleware function that logs incoming request details (method, URL) and response duration. Middleware runs sequentially before and after data requests, useful for tasks like logging and authentication.

```typescript
async function loggingMiddleware(
  { request, context },
  next,
) {
  console.log(
    `${new Date().toISOString()} ${request.method} ${request.url}`,
  );
  const start = performance.now();
  const response = await next();
  const duration = performance.now() - start;
  console.log(
    `${new Date().toISOString()} Response ${response.status} (${duration}ms)`,
  );
  return response;
}

export const middleware = [loggingMiddleware];

```

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

### Advanced Route Configuration with Nested and Layout Routes

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

Illustrates a more complex route configuration using React Router, showcasing nested routes, layout routes (routes without a path), and index routes. This setup allows for structured application layouts and default child route rendering.

```jsx
<Routes>
  <Route index element={<Home />} />
  <Route path="about" element={<About />} />

  <Route element={<AuthLayout />}>
    <Route path="login" element={<Login />} />
    <Route path="register" element={<Register />} />
  </Route>

  <Route path="concerts">
    <Route index element={<ConcertsHome />} />
    <Route path=":city" element={<City />} />
    <Route path="trending" element={<Trending />} />
  </Route>
</Routes>

```

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

### Unit Test Example with createRoutesStub (Type Error)

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

An example of a unit test using `createRoutesStub` to test a `LoginRoute` component. This snippet demonstrates a common type incompatibility issue where the stubbed `matches` property causes TypeScript errors.

```typescript
import LoginRoute from "./login";

test("LoginRoute renders error messages", async () => {
  const Stub = createRoutesStub([
    {
      path: "/login",
      Component: LoginRoute,
      // ^ ❌ Types of property 'matches' are incompatible.
      action() {
        /*...*/
      },
    },
  ]);

  // ...
});

```

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

### Configure Nested React Router Routes

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

Demonstrates configuring nested routes within a React Router setup. This allows for hierarchical navigation and component rendering. It uses 'children' to define sub-routes and specifies components for each path. Requires 'react-router'.

```javascript
createBrowserRouter([
  {
    path: "/",
    Component: Root,
    children: [
      { index: true, Component: Home },
      { path: "about", Component: About },
      {
        path: "auth",
        Component: AuthLayout,
        children: [
          { path: "login", Component: Login },
          { path: "register", Component: Register },
        ],
      },
      {
        path: "concerts",
        children: [
          { index: true, Component: ConcertsHome },
          { path: ":city", Component: ConcertsCity },
          { path: "trending", Component: ConcertsTrending },
        ],
      },
    ],
  },
]);

```

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

### Unit Test with createRoutesStub ( mengatasi Type Error)

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

A modified unit test example using `createRoutesStub`, incorporating the `@ts-expect-error` comment to suppress TypeScript errors related to `matches` type incompatibility between the test environment and application runtime.

```typescript
const Stub = createRoutesStub([
  {
    path: "/login",
    // @ts-expect-error: `matches` won't align between test code and app code
    Component: LoginRoute,
    action() {
      /*...*/
    },
  },
]);

```

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

### Loader Function for Data Fetching in React Router

Source: https://reactrouter.com/start/data/route-object

This example demonstrates the use of the `loader` property in a Route Object to fetch data asynchronously before a route component is rendered. It shows how to define a loader function and consume its data using `useLoaderData`.

```javascript
import {
  useLoaderData,
  createBrowserRouter,
} from "react-router";

createBrowserRouter([
  {
    path: "/",
    loader: loader,
    Component: MyRoute,
  },
]);

async function loader({ params }) {
  return { message: "Hello, world!" };
}

function MyRoute() {
  let data = useLoaderData();
  return <h1>{data.message}</h1>;
}
```

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

### Conditional style with NavLink

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

This example demonstrates using a callback function for the 'style' prop in NavLink to apply inline styles based on the link's active, pending, and transitioning states, controlling properties like fontWeight and color.

```javascript
// style
<NavLink
  to="/messages"
  style={({ isActive, isPending, isTransitioning }) => {
    return {
      fontWeight: isActive ? "bold" : "",
      color: isPending ? "red" : "black",
      viewTransitionName: isTransitioning ? "slide" : "",
    };
  }}
>
  Messages
</NavLink>

```

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

### Dynamic Route Segments with React Router

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

Paths starting with a colon (`:`) denote dynamic segments, which are parsed from the URL and made available as `params` to router APIs like loaders and components via `useParams`. This enables fetching data or rendering components based on specific URL values. Multiple dynamic segments can be combined in a single path.

```javascript
{
  path: "teams/:teamId",
  loader: async ({ params }) => {
    // params are available in loaders/actions
    let team = await fetchTeam(params.teamId);
    return { name: team.name };
  },
  Component: Team,
}
```

```javascript
import { useParams } from "react-router";

function Team() {
  // params are available in components through useParams
  let params = useParams();
  // ...
}
```

```javascript
{
  path: "c/:categoryId/p/:productId";
}
```

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

### Action Function for Data Mutations in React Router

Source: https://reactrouter.com/start/data/route-object

Illustrates how to use the `action` property in a Route Object to handle data mutations on the server. This example shows creating a new 'todo' item and automatically revalidating loader data upon successful completion using `<Form>`.

```javascript
import {
  createBrowserRouter,
  useLoaderData,
  useActionData,
  Form,
} from "react-router";
import { TodoList } from "~/components/TodoList";

createBrowserRouter([
  {
    path: "/items",
    action: action,
    loader: loader,
    Component: Items,
  },
]);

async function action({ request }) {
  const data = await request.formData();
  const todo = await fakeDb.addItem({
    title: data.get("title"),
  });
  return { ok: true };
}

// this data will be revalidated after the action completes...
async function loader() {
  const items = await fakeDb.getItems();
  return { items };
}

// ...so that the list here is updated automatically
export default function Items() {
  let data = useLoaderData();
  return (
    <div>
      <List items={data.items} />
      <Form method="post" navigate={false}>
        <input type="text" name="title" />
        <button type="submit">Create Todo</button>
      </Form>
    </div>
  );
}
```

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

### Local Pending Navigation Indicators with NavLink

Source: https://reactrouter.com/start/framework/pending-ui

This example demonstrates how to provide pending state indicators directly within navigation links using `NavLink`. It utilizes the functional props (children, style) of `NavLink` to conditionally display a spinner or change styling based on the `isPending` state.

```javascript
import { NavLink } from "react-router";

function Navbar() {
  return (
    <nav>
      <NavLink
        to="/home"
      >
        {({ isPending }) => (
          <span>Home {isPending && <Spinner />}</span>
        )}
      </NavLink>
      <NavLink
        to="/about"
        style={({ isPending }) => ({
          color: isPending ? "gray" : "black",
        })}
      >
        About
      </NavLink>
    </nav>
  );
}
```

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

### Conditional children with NavLink

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

This example illustrates using a callback function for the 'children' prop in NavLink to render content conditionally. The example shows how to apply a class to a span element based on the link's active state.

```javascript
// children
<NavLink to="/tasks">
  {({ isActive, isPending, isTransitioning }) => (
    <span className={isActive ? "active" : ""}>Tasks</span>
  )}
</NavLink>

```

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

### Create React Router with Node.js Docker and Postgres Template

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

This command scaffolds a React Router application using a Docker template that includes Node.js, Postgres, Drizzle ORM, and Tailwind CSS. It features server rendering and a custom Express server, designed for deployment on platforms supporting Docker.

```bash
npx create-react-router@latest --template remix-run/react-router-templates/node-postgres
```

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

### Create React Router with Node.js Docker Template

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

This command creates a new React Router project using the default Node.js Docker template. This template includes server rendering and Tailwind CSS, and is suitable for deployment on any platform supporting Docker.

```bash
npx create-react-router@latest --template remix-run/react-router-templates/default
```

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

### Conditional className with NavLink

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

This example shows how to use a callback function for the 'className' prop in NavLink to dynamically apply CSS classes based on the link's active, pending, and transitioning states.

```javascript
// className
<NavLink
  to="/messages"
  className={({ isActive, isPending, isTransitioning }) =>
    [
      isPending ? "pending" : "",
      isActive ? "active" : "",
      isTransitioning ? "transitioning" : "",
    ].join(" ")
  }
>
  Messages
</NavLink>

```

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

### Create React Router with Node.js Custom Server Docker Template

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

This command generates a React Router project with a custom Express server, utilizing Docker for containerization. It supports server rendering, Tailwind CSS, and offers more control over the server environment, deployable on Docker-compatible platforms.

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

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

### Configure Basic React Router

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

Configures a basic React Router with a root component for the main path. Requires the 'react-router' library.

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

function Root() {
  return <h1>Hello world</h1>;
}

const router = createBrowserRouter([
  { path: "/", Component: Root },
]);

```

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

### Configure Basic Routes in React Router

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

Defines a basic route configuration in `app/routes.ts` using the `route` function. Each entry maps a URL pattern to a module file path. This is the fundamental way to declare routes in the application.

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

export default [
  route("some/path", "./some-file.tsx"),
  // pattern ^           ^ module file
] satisfies RouteConfig;
```

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

### Client-Side Hydration with React Router

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

Initializes the client-side React Router application by hydrating the server-rendered HTML. It uses data embedded in `window.__staticRouterHydrationData` to create a router and renders the main application component.

```javascript
import { StrictMode } from "react";
import { hydrateRoot } from "react-dom/client";
import { RouterProvider } from "react-router/dom";
import routes from "./app/routes.js";
import { createBrowserRouter } from "react-router";

let router = createBrowserRouter(routes, {
  hydrationData: window.__staticRouterHydrationData,
});

hydrateRoot(
  document,
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>,
);

```

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

### Server-Side Rendering with React Router

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

Renders React components to HTML on the server using React Router's static handler and router. It fetches data using actions and loaders, sets response headers, and returns a full HTML document. Assumes server receives Request objects.

```javascript
import { renderToString } from "react-dom/server";
import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router";

import routes from "./some-routes.js";

let { query, dataRoutes } = createStaticHandler(routes);

export async function handler(request: Request) {
  // 1. run actions/loaders to get the routing context with `query`
  let context = await query(request);

  // If `query` returns a Response, send it raw (a route probably a redirected)
  if (context instanceof Response) {
    return context;
  }

  // 2. Create a static router for SSR
  let router = createStaticRouter(dataRoutes, context);

  // 3. Render everything with StaticRouterProvider
  let html = renderToString(
    <StaticRouterProvider
      router={router}
      context={context}
    />,
  );

  // Setup headers from action and loaders from deepest match
  let leaf = context.matches[context.matches.length - 1];
  let actionHeaders = context.actionHeaders[leaf.route.id];
  let loaderHeaders = context.loaderHeaders[leaf.route.id];
  let headers = new Headers(actionHeaders);
  if (loaderHeaders) {
    for (let [key, value] of loaderHeaders.entries()) {
      headers.append(key, value);
    }
  }

  headers.set("Content-Type", "text/html; charset=utf-8");

  // 4. send a response
  return new Response(`<!DOCTYPE html>${html}`, {
    status: context.statusCode,
    headers,
  });
}

```

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

### Accessing URL Search Parameters with useSearchParams in React

Source: https://reactrouter.com/start/declarative/url-values

Explains how to retrieve URL search parameters (query parameters) using the `useSearchParams` hook in React Router. It shows how to get a specific parameter's value using the `URLSearchParams` interface.

```jsx
import { useSearchParams } from "react-router-dom";

function SearchResults() {
  let [searchParams] = useSearchParams();
  return (
    <div>
      <p>
        You searched for <i>{searchParams.get("q")}</i>
      </p>
      <FakeSearchResults />
    </div>
  );
}
```

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

### Create BrowserRouter with Basic Route Object

Source: https://reactrouter.com/start/data/route-object

This snippet demonstrates the fundamental usage of `createBrowserRouter` with a simple Route Object, defining the root path and associating it with a component.

```javascript
createBrowserRouter([
  {
    path: "/",
    Component: App,
  },
]);
```

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

### Define Dynamic Segments in React Router Paths

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

Dynamic segments are URL path segments starting with a colon (`:`). When a route matches, these segments are parsed and made available as `params` to loader functions and components. Multiple dynamic segments can be used in a single route path.

```typescript
route("teams/:teamId", "./team.tsx"),
```

```typescript
import type { Route } from "./+types/team";

export async function loader({ params }: Route.LoaderArgs) {
  //                           ^? { teamId: string }
}

export default function Component({
  params,
}: Route.ComponentProps) {
  params.teamId;
  //        ^ string
}
```

```typescript
route("c/:categoryId/p/:productId", "./product.tsx"),
```

```typescript
import type { Route } from "./+types/product";

async function loader({ params }: LoaderArgs) {
  //                    ^? { categoryId: string; productId: string }
}
```

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

### Static Data Loading with loader during Pre-rendering in React Router

Source: https://reactrouter.com/start/framework/data-loading

Enables data fetching during the production build process for static site generation (SSG). The `loader` function is used to retrieve data, similar to server-side rendering. The specific URLs to pre-render are defined in a configuration file (`react-router.config.ts`) using the `prerender` function, which returns an array of paths.

```typescript
// route("products/:pid", "./product.tsx");
import type { Route } from "./+types/product";

export async function loader({ params }: Route.LoaderArgs) {
  let product = await getProductFromCSVFile(params.pid);
  return product;
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}
```

```typescript
import type { Config } from "@react-router/dev/config";

export default {
  async prerender() {
    let products = await readProductsFromCSVFile();
    return products.map(
      (product) => `/products/${product.id}`,
    );
  },
} satisfies Config;
```

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

### Combine Programmatic and File System Routing in React Router

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

Shows how to combine programmatic route configuration with file system-based routing using `@react-router/fs-routes`. This allows developers to leverage both explicit route definitions and convention-based routing within the same application.

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

export default [
  route("/", "./home.tsx"),

  ...(await flatRoutes()),
] satisfies RouteConfig;
```

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

### HydrateFallback for Initial Load Rendering (JavaScript)

Source: https://reactrouter.com/start/framework/route-module

Allows a fallback UI to render immediately on initial page load while client loaders complete their data fetching. This improves perceived performance by showing content sooner. The fallback is replaced by the main component once data is ready.

```javascript
export async function clientLoader() {
  const data = await fakeLoadLocalGameData();
  return data;
}

export function HydrateFallback() {
  return <p>Loading Game...</p>;
}

export default function Component({ loaderData }) {
  return <Game data={loaderData} />;
}

```

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

### Define Route Loader for Data Provision (React)

Source: https://reactrouter.com/start/data/data-loading

This snippet demonstrates how to define an asynchronous loader function within a route configuration in React Router. The loader is responsible for fetching data, such as records from an API, and returning it. This data will then be made available to the associated route component. It uses the `createBrowserRouter` function to set up the routes.

```javascript
import {
  createBrowserRouter,
} from "react-router-dom";

async function getSomeRecords() {
  // Simulate fetching data
  return [{ id: 1, name: "Record 1" }, { id: 2, name: "Record 2" }];
}

const router = createBrowserRouter([
  {
    path: "/",
    loader: async () => {
      // return data from here
      return { records: await getSomeRecords() };
    },
    Component: MyRoute,
  },
]);

```

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

### Prefix Route Grouping in React Router

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

Define a route with a path but no component to act as a prefix for a group of child routes. This allows for nested routing structures without rendering a layout component at the prefix level. The child routes inherit the path prefix. Example paths: `/projects`, `/projects/:pid`, `/projects/:pid/edit`.

```javascript
createBrowserRouter([
  {
    // no component, just a path
    path: "/projects",
    children: [
      { index: true, Component: ProjectsHome },
      { path: ":pid", Component: Project },
      { path: ":pid/edit", Component: EditProject },
    ],
  },
]);
```

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

### Link Component for Basic Navigation (React)

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

Shows the basic usage of the Link component from 'react-router' for simple navigation where active state styling is not required. It's suitable for standard links like navigating back to a login page.

```jsx
import { Link } from "react-router";

export function LoggedOutMessage() {
  return (
    <p>
      You've been logged out.{" "}
      <Link to="/login">Login again</Link>
    </p>
  );
}
```

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

### Render Router with React Router

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

Renders the configured router in the browser using the `<RouterProvider>` component. It requires `createRoot` from 'react-dom/client' to attach the router to the DOM. This is essential for enabling routing in a React application.

```javascript
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router";
import { createRoot } from "react-dom/client";

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

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

### Client Data Loading with clientLoader in React Router

Source: https://reactrouter.com/start/framework/data-loading

Fetches data on the client-side using the `clientLoader` function. This is useful for pages or applications where data fetching should occur exclusively in the browser. It handles asynchronous data retrieval and provides a fallback component while data is loading. The fetched data is then passed to the route component via `loaderData`.

```typescript
import type { Route } from "./+types/product";

export async function clientLoader({
  params,
}: Route.ClientLoaderArgs) {
  const res = await fetch(`/api/products/${params.pid}`);
  const product = await res.json();
  return product;
}

// HydrateFallback is rendered while the client loader is running
export function HydrateFallback() {
  return <div>Loading...</div>;
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}
```

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

### Access Route Loader Data in Component (React)

Source: https://reactrouter.com/start/data/data-loading

This snippet shows how to access data provided by a route loader within a React functional component using the `useLoaderData` hook from React Router. The hook retrieves the data returned by the loader associated with the current route. The example component then destructures the `records` from the loaded data and displays their count.

```javascript
import {
  useLoaderData
} from "react-router-dom";

function MyRoute() {
  const { records } = useLoaderData();
  return (
    <div>
      <h1>Data Loaded:</h1>
      <p>Number of records: {records.length}</p>
      <ul>
        {records.map(record => (
          <li key={record.id}>{record.name}</li>
        ))}
      </ul>
    </div>
  );
}

```

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

### Configure Advanced Routes in React Router

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

Demonstrates an advanced route configuration including index routes, layout routes, and prefixed routes using functions like `index`, `layout`, and `prefix`. This allows for more complex routing structures like authentication flows and nested layouts.

```typescript
import {
  type RouteConfig,
  route,
  index,
  layout,
  prefix,
} from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("about", "./about.tsx"),

  layout("./auth/layout.tsx", [
    route("login", "./auth/login.tsx"),
    route("register", "./auth/register.tsx"),
  ]),

  ...prefix("concerts", [
    index("./concerts/home.tsx"),
    route(":city", "./concerts/city.tsx"),
    route("trending", "./concerts/trending.tsx"),
  ]),
] satisfies RouteConfig;
```

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

### Configure Server-Side Rendering in React Router

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

This configuration enables server-side rendering for the React Router application. It requires a deployment environment that supports SSR. Individual routes can still be statically pre-rendered or use client data loading.

```typescript
import type { Config } from "@react-router/dev/config";

export default {
  ssr: true,
} satisfies Config;
```

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

### Configure Static Pre-rendering in React Router

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

This configuration enables static pre-rendering at build time, generating static HTML and data payloads for specified URLs. It's beneficial for SEO and performance, especially without SSR. Route module loaders are used to fetch data during the build.

```typescript
import type { Config } from "@react-router/dev/config";

export default {
  // return a list of URLs to prerender at build time
  async prerender() {
    return ["/", "/about", "/contact"];
  },
} satisfies Config;
```

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

### Middleware Execution in React Router Route Objects

Source: https://reactrouter.com/start/data/route-object

Shows how `middleware` arrays within Route Objects can be used to execute logic sequentially before and after navigations for tasks like logging and authentication. Demonstrates `loggingMiddleware` and `authMiddleware`.

```javascript
createBrowserRouter([
  {
    path: "/",
    middleware: [loggingMiddleware],
    loader: rootLoader,
    Component: Root,
    children: [{
      path: 'auth',
      middleware: [authMiddleware],
      loader: authLoader,
      Component: Auth,
      children: [...] // Other nested routes
    }]
  },
]);

async function loggingMiddleware({ request }, next) {
  let url = new URL(request.url);
  console.log(`Starting navigation: ${url.pathname}${url.search}`);
  const start = performance.now();
  await next();
  const duration = performance.now() - start;
  console.log(`Navigation completed in ${duration}ms`);
}

const userContext = createContext<User>();

async function authMiddleware ({ context }) {
  const userId = getUserId();

  if (!userId) {
    throw redirect("/login");
  }

  context.set(userContext, await getUserById(userId));
};
```

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

### Lazy Loading Routes in React Router

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

Demonstrates how to implement lazy loading for routes using the `lazy` property with `createBrowserRouter`. This allows for asynchronous loading of route components, loaders, and actions, improving initial load performance.

```javascript
createBrowserRouter([
  {
    path: "/show/:showId",
    lazy: {
      loader: async () =>
        (await import("./show.loader.js") ).loader,
      action: async () =>
        (await import("./show.action.js") ).action,
      Component: async () =>
        (await import("./show.component.js") ).Component,
    },
  },
]);
```

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

### Using Route Component Props

Source: https://reactrouter.com/start/framework/route-module

Demonstrates how to use the automatically generated `Route.ComponentProps` within a route component. These props provide typed access to `loaderData`, `actionData`, `params`, and `matches`, offering an alternative to specific hooks.

```typescript
import type { Route } from "./+types/route-name";

export default function MyRouteComponent({
  loaderData,
  actionData,
  params,
  matches,
}: Route.ComponentProps) {
  return (
    <div>
      <h1>Welcome to My Route with Props!</h1>
      <p>Loader Data: {JSON.stringify(loaderData)}</p>
      <p>Action Data: {JSON.stringify(actionData)}</p>
      <p>Route Parameters: {JSON.stringify(params)}</p>
      <p>Matched Routes: {JSON.stringify(matches)}</p>
    </div>
  );
}

```

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

### React Component with Route Props

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

A sample React component `Login` that accepts `actionData` as a prop, typically provided by React Router's framework mode. This component renders a form with the POST method.

```tsx
export default function Login({
  actionData,
}: Route.ComponentProps) {
  return <Form method="post">...</Form>;
}

```

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

### Client Middleware for Logging Requests (JavaScript)

Source: https://reactrouter.com/start/framework/route-module

Implements client-side middleware that runs in the browser during client navigations. It logs request details and response times without returning HTTP Responses. Requires `performance` API for timing.

```javascript
async function loggingMiddleware(
  { request, context },
  next,
) {
  console.log(
    `${new Date().toISOString()} ${request.method} ${request.url}`,
  );
  const start = performance.now();
  await next(); // 👈 No Response returned
  const duration = performance.now() - start;
  console.log(
    `${new Date().toISOString()} Response ${response.status} (${duration}ms)`,
  );
  // ✅ No need to return anything
}

export const clientMiddleware = [loggingMiddleware];

```

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

### Define a Route Module with Loader and Component in React Router

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

Illustrates the structure of a route module file. It includes an asynchronous `loader` function to fetch data and a default `Component` function to render the UI using the loaded data. This promotes data loading co-location with components.

```typescript
// provides type safety/inference
import type { Route } from "./+types/team";

// provides `loaderData` to the component
export async function loader({ params }: Route.LoaderArgs) {
  let team = await fetchTeam(params.teamId);
  return { name: team.name };
}

// renders after the loader is done
export default function Component({
  loaderData,
}: Route.ComponentProps) {
  return <h1>{loaderData.name}</h1>;
}
```

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

### Create Browser Router with React Router

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

Defines a browser router using `createBrowserRouter` from 'react-router'. It accepts an array of route objects, enabling features like loaders and actions. This is a fundamental step for client-side routing.

```javascript
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,
          }),
      },
    ],
  },
]);
```

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

### Create Static Handler for Server Rendering in React Router

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

Creates a static request handler using `createStaticHandler` from 'react-router'. This utility processes server-side routing logic based on defined routes, preparing data and routes for rendering.

```javascript
import { createStaticHandler } from "react-router";
import routes from "./some-routes";

let { query, dataRoutes } = createStaticHandler(routes);
```

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

### Client Loader for Browser Data Fetching (JavaScript)

Source: https://reactrouter.com/start/framework/route-module

Provides data to route components exclusively in the browser, either augmenting or replacing server loaders. It can call server loaders via `serverLoader` and fetch client-side data. Supports hydration via `hydrate: true`.

```javascript
export async function clientLoader({ serverLoader }) {
  // call the server loader
  const serverData = await serverLoader();
  // And/or fetch data on the client
  const data = getDataFromClient();
  // Return the data to expose through useLoaderData()
  return data;
}

```

```javascript
export async function clientLoader() {
  // ...
}
clientLoader.hydrate = true as const;

```

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

### Framework Mode Route Definition

Source: https://reactrouter.com/start/modes

Demonstrates route configuration for Framework Mode using the `@react-router/dev/routes` module. This mode leverages a Vite plugin for enhanced features like type-safe hrefs, intelligent code splitting, and various rendering strategies (SPA, SSR, static).

```javascript
import { index, route } from "@react-router/dev/routes";

export default [
  index("./home.tsx"),
  route("products/:pid", "./product.tsx"),
];

```

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

### Force Client Loader Hydration with Fallback in React Router

Source: https://reactrouter.com/start/framework/data-loading

This snippet shows how to configure a 'clientLoader' to run during hydration before the component renders by setting `clientLoader.hydrate = true`. It includes a 'HydrateFallback' component to display a loading state while the client loader executes. Both 'loader' and 'clientLoader' functions are defined, with the 'clientLoader' specifically marked for hydration.

```typescript
export async function loader() {
  /* ... */
}

export async function clientLoader() {
  /* ... */
}

// force the client loader to run during hydration
clientLoader.hydrate = true as const; // `as const` for type inference

export function HydrateFallback() {
  return <div>Loading...</div>;
}

export default function Product() {
  /* ... */
}

```

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

### Define Server Routes for React Router

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

Defines route configurations for server-side rendering using React Router. These are the same route objects used on the client but are utilized by server-side APIs for rendering and data fetching.

```javascript
export default [
  {
    path: "/",
    Component: Root,
    children: [
      {
        path: "shows/:showId",
        Component: Show,
        loader: ({ params }) => {
          return db.loadShow(params.id);
        },
      },
    ],
  },
];
```

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

### Pending Form Submission with Fetcher

Source: https://reactrouter.com/start/framework/pending-ui

This code illustrates how to show a 'Submitting...' state for a form submission using `useFetcher`. This is recommended for independent form mutations as it manages its own pending state separately from global navigation.

```javascript
import { useFetcher } from "react-router";

function NewProjectForm() {
  const fetcher = useFetcher();

  return (
    <fetcher.Form method="post">
      <input type="text" name="title" />
      <button type="submit">
        {fetcher.state !== "idle"
          ? "Submitting..."
          : "Submit"}
      </button>
    </fetcher.Form>
  );
}
```

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

### Server Data Loading with loader in React Router

Source: https://reactrouter.com/start/framework/data-loading

Utilizes the `loader` function for data fetching during server rendering, including initial page loads and client-side navigations. React Router automatically calls this loader via `fetch` from the browser to the server for client navigations. The `loader` function is excluded from client bundles, allowing the use of server-only APIs securely. Data returned by the loader is passed to the component via `loaderData`.

```typescript
// route("products/:pid", "./product.tsx");
import type { Route } from "./+types/product";
import { fakeDb } from "../db";

export async function loader({ params }: Route.LoaderArgs) {
  const product = await fakeDb.getProduct(params.pid);
  return product;
}

export default function Product({
  loaderData,
}: Route.ComponentProps) {
  const { name, description } = loaderData;
  return (
    <div>
      <h1>{name}</h1>
      <p>{description}</p>
    </div>
  );
}
```

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

### Linking Components in React Router

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

Shows how to use `Link` and `NavLink` components from `react-router` to create navigation links within a React application. `NavLink` provides built-in support for styling active links based on the current URL.

```javascript
import { NavLink, Link } from "react-router";

function Header() {
  return (
    <nav>
      {/* NavLink makes it easy to show active states */}
      <NavLink
        to="/"
        className={({ isActive }) =>
          isActive ? "active" : ""
        }
      >
        Home
      </NavLink>

      <Link to="/concerts/salt-lake-city">Concerts</Link>
    </nav>
  );
}
```

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

### Route Loader for Data Fetching (JavaScript)

Source: https://reactrouter.com/start/framework/route-module

Defines a route loader that fetches data on the server before route components are rendered. This data is available to the component via props. Called during server rendering or pre-rendering.

```javascript
export async function loader() {
  return { message: "Hello, world!" };
}

export default function MyRoute({ loaderData }) {
  return <h1>{loaderData.message}</h1>;
}

```

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

### React Router Route Object with Data Loader

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

Shows how to define a Route Object in React Router with an asynchronous data loader. The loader fetches data based on route parameters and makes it available to the component via `useLoaderData`. Requires 'react-router'.

```javascript
import {
  createBrowserRouter,
  useLoaderData,
} from "react-router";

createBrowserRouter([
  {
    path: "/teams/:teamId",
    loader: async ({ params }) => {
      let team = await fetchTeam(params.teamId);
      return { name: team.name };
    },
    Component: Team,
  },
]);

function Team() {
  let data = useLoaderData();
  return <h1>{data.name}</h1>;
}

```

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

### useNavigate Hook for Programmatic Navigation (React)

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

Illustrates the use of the useNavigate hook from 'react-router' to programmatically navigate the user to a different page. This is typically used in response to events like form submissions or timeouts, where direct user interaction isn't the trigger.

```jsx
import { useNavigate } from "react-router";

export function LoginPage() {
  let navigate = useNavigate();

  return (
    <>
      <MyHeader />
      <MyLoginForm
        onSuccess={() => {
          navigate("/dashboard");
        }}
      />
      <MyFooter />
    </>
  );
}
```

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

### React Router Index Route Configuration

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

Shows how to define an index route in React Router by setting `index: true`. Index routes act as default children and render at the parent's URL. They cannot have children themselves. Requires 'react-router'.

```javascript
{ index: true, Component: Home }

import { createBrowserRouter } from "react-router";

createBrowserRouter([
  // renders at "/"
  { index: true, Component: Home },
  {
    Component: Dashboard,
    path: "/dashboard",
    children: [
      // renders at "/dashboard"
      { index: true, Component: DashboardHome },
      { path: "settings", Component: DashboardSettings },
    ],
  },
]);

```

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

### Testing React Router Components with createRoutesStub

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

This test case demonstrates how to test the LoginForm component using `createRoutesStub` from `react-router`. It sets up a route stub with a mock action that returns error messages and then verifies that these messages are rendered correctly after a simulated form submission.

```jsx
import { createRoutesStub } from "react-router";
import {
  render,
  screen,
  waitFor,
} from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginForm } from "./LoginForm";

test("LoginForm renders error messages", async () => {
  const USER_MESSAGE = "Username is required";
  const PASSWORD_MESSAGE = "Password is required";

  const Stub = createRoutesStub([
    {
      path: "/login",
      Component: LoginForm,
      action() {
        return {
          errors: {
            username: USER_MESSAGE,
            password: PASSWORD_MESSAGE,
          },
        };
      },
    },
  ]);

  // render the app stub at "/login"
  render(<Stub initialEntries={["/login"]} />);

  // simulate interactions
  userEvent.click(screen.getByText("Login"));
  await waitFor(() => screen.findByText(USER_MESSAGE));
  await waitFor(() => screen.findByText(PASSWORD_MESSAGE));
});

```

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

### React Link Component for Basic Navigation

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

The Link component is used for creating basic navigation links in React applications when active styling is not required. It's a straightforward way to link to different routes within the application.

```javascript
import { Link } from "react-router";

export function LoggedOutMessage() {
  return (
    <p>
      You've been logged out.{" "}
      <Link to="/login">Login again</Link>
    </p>
  );
}

```
Tokens:
Raw