React Router

https://reactrouter.com/6.30.3
Admin
React Router is a declarative routing library for React applications that enables navigation between...
Tokens:117,941
Snippets:1,255
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Basic HashRouter Setup

Source: https://reactrouter.com/6.30.3/router-components/hash-router

Demonstrates the basic setup for using HashRouter in a React application. This is useful when server-side routing is not possible.

```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { HashRouter } from "react-router-dom";

ReactDOM.render(
  <HashRouter>
    {/* The rest of your app goes here */}
  </HashRouter>,
  root
);
```

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

### Example Usage of createStaticRouter

Source: https://reactrouter.com/6.30.3/routers/create-static-router

An example demonstrating how to use createStaticRouter within a server-side rendering context.

```APIDOC
## Example Usage

### Description
This example shows how to integrate `createStaticRouter` into a server-side rendering flow.

### Code
```jsx
import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router-dom/server";
import Root, {
  loader as rootLoader,
  ErrorBoundary as RootBoundary,
} from "./root";
import ReactDOMServer from "react-dom/server";

const routes = [
  {
    path: "/",
    loader: rootLoader,
    Component: Root,
    ErrorBoundary: RootBoundary,
  },
];

// Assume createFetchRequest is defined elsewhere to handle request creation
// declare function createFetchRequest(req: any): Request;

export async function renderHtml(req) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let fetchRequest = createFetchRequest(req);
  let context = await query(fetchRequest);

  if (context instanceof Response) {
    throw context;
  }

  let router = createStaticRouter(dataRoutes, context);

  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouterProvider
        router={router}
        context={context}
      />
    </React.StrictMode>
  );
}
```
```

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

### Bootstrap React App with Vite and Install Dependencies

Source: https://reactrouter.com/6.30.3/start/tutorial

Use this command to create a new React project with Vite, install React Router, and other tutorial-specific dependencies. Ensure you navigate into the project directory and run the development server.

```bash
npm create vite@latest name-of-your-project -- --template react
# follow prompts
cd <your new project directory>
npm install react-router-dom # always need this!
npm install localforage match-sorter sort-by # only for this tutorial.
npm run dev
```

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

### Navigate Back/Forward with useNavigate (v6)

Source: https://reactrouter.com/6.30.3/upgrading/v5

This v6 example demonstrates navigating back and forward using numerical arguments with the useNavigate hook.

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

function App() {
  const navigate = useNavigate();

  return (
    <>
      <button onClick={() => navigate(-2)}>
        Go 2 pages back
      </button>
      <button onClick={() => navigate(-1)}>Go back</button>
      <button onClick={() => navigate(1)}>
        Go forward
      </button>
      <button onClick={() => navigate(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}
```

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

### Install React Router v6

Source: https://reactrouter.com/6.30.3/upgrading/reach

Install the latest versions of react-router and react-router-dom.

```sh
npm install react-router@6 react-router-dom@6
```

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

### Create Hash Router Example

Source: https://reactrouter.com/6.30.3/routers/create-hash-router

Demonstrates how to create a hash router with nested routes. This is useful when server-side configuration for routing is not possible.

```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createHashRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createHashRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

```

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

### Install Experimental React Router Releases

Source: https://reactrouter.com/6.30.3/guides/contributing

Add the '@next' tag to install the latest experimental build of React Router. This can be done with either pnpm or npm.

```bash
pnpm add react-router-dom@next
# or
npm install react-router-dom@next
```

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

### Link Navigation Analogy to Filesystem

Source: https://reactrouter.com/6.30.3/upgrading/v5

This example illustrates how relative `<Link to>` values in v6 behave like `cd` commands in a filesystem, navigating up and down the route hierarchy.

```text
// If your routes look like this
<Route path="app">
  <Route path="dashboard">
    <Route path="stats" />
  </Route>
</Route>

// and the current URL is /app/dashboard (with or without
// a trailing slash)
<Link to="stats">               => <a href="/app/dashboard/stats">
<Link to="../stats">            => <a href="/app/stats">
<Link to="../../stats">         => <a href="/stats">
<Link to="../../../stats">      => <a href="/stats">

// On the command line, if the current directory is /app/dashboard
cd stats                        # pwd is /app/dashboard/stats
cd ../stats                     # pwd is /app/stats
cd ../../stats                  # pwd is /stats
cd ../../../stats               # pwd is /stats
```

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

### Example Usage of createStaticHandler

Source: https://reactrouter.com/6.30.3/routers/create-static-handler

Demonstrates how to use createStaticHandler within a server-side rendering context to fetch data and render HTML.

```APIDOC
## Example Usage

### Description
This example shows how to use `createStaticHandler` to fetch data and render HTML on the server.

### Code
```jsx lines=[2,21-23]
import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router-dom/server";
import Root, {
  loader as rootLoader,
  ErrorBoundary as RootBoundary,
} from "./root";

const routes = [
  {
    path: "/",
    loader: rootLoader,
    Component: Root,
    ErrorBoundary: RootBoundary,
  },
];

export async function renderHtml(req) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let fetchRequest = createFetchRequest(req);
  let context = await query(fetchRequest);

  // If we got a redirect response, short circuit and let our Express server
  // handle that directly
  if (context instanceof Response) {
    throw context;
  }

  let router = createStaticRouter(dataRoutes, context);
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouterProvider
        router={router}
        context={context}
      />
    </React.StrictMode>
  );
}
```
```

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

### Navigate Back/Forward with useHistory (v5)

Source: https://reactrouter.com/6.30.3/upgrading/v5

This v5 example shows how to navigate back and forward using the go, goBack, and goForward methods from the useHistory hook.

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

function App() {
  const { go, goBack, goForward } = useHistory();

  return (
    <>
      <button onClick={() => go(-2)}>
        Go 2 pages back
      </button>
      <button onClick={goBack}>Go back</button>
      <button onClick={goForward}>Go forward</button>
      <button onClick={() => go(2)}>
        Go 2 pages forward
      </button>
    </>
  );
}
```

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

### Example: Resolving Action for useSubmit

Source: https://reactrouter.com/6.30.3/hooks/use-form-action

Illustrates how to use `useFormAction` to get the current route's action and pass it to `useSubmit` for form submissions.

```APIDOC
## Example: Resolving Action for `useSubmit`

### Description
This example demonstrates how to use `useFormAction` to obtain the action for the current route and then pass this resolved action to the `submit` function from `useSubmit`. This ensures that form data is submitted to the correct endpoint.

### Usage
```jsx
import { useSubmit, useFormAction } from "react-router-dom";

// Assume formData is available
let submit = useSubmit();
let action = useFormAction();
submit(formData, { action });
```

### Explanation
- `let action = useFormAction();` retrieves the default action for the current route.
- `submit(formData, { action });` uses the retrieved action to send the `formData`.
```

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

### Mutation Form Submissions (PUT, DELETE)

Source: https://reactrouter.com/6.30.3/components/form

This example demonstrates handling mutation submissions (PUT, DELETE) within a route action. It shows how to get the request method and access form data.

```tsx
<Route
  path="/projects/:id"
  element={<Project />}
  loader={async ({ params }) => {
    return fakeLoadProject(params.id);
  }}
  action={async ({ request, params }) => {
    switch (request.method) {
      case "PUT": {
        let formData = await request.formData();
        let name = formData.get("projectName");
        return fakeUpdateProject(name);
      }
      case "DELETE": {
        return fakeDeleteProject(params.id);
      }
      default: {
        throw new Response("", { status: 405 });
      }
    }
  }}
/>;

function Project() {
  let project = useLoaderData();

  return (
    <>
      <Form method="put">
        <input
          type="text"
          name="projectName"
          defaultValue={project.name}
        />
        <button type="submit">Update Project</button>
      </Form>

      <Form method="delete">
        <button type="submit">Delete Project</button>
      </Form>
    </>
  );
}
```

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

### Install React Router v6

Source: https://reactrouter.com/6.30.3/upgrading/v5

Install React Router v6 using npm. Use react-router-dom for web apps and react-router-native for React Native apps.

```bash
$ npm install react-router-dom
# or, for a React Native app
$ npm install react-router-native
```

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

### redirectDocument URL Parameter Example

Source: https://reactrouter.com/6.30.3/fetch/redirectDocument

Demonstrates the basic usage of redirectDocument with only the URL parameter to specify the redirection target.

```js
redirectDocument("/otherapp/login");
```

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

### Basic Link Usage Example

Source: https://reactrouter.com/6.30.3/components/link

Demonstrates how to use the Link component to create navigation links within a list. Ensure React and React Router DOM are imported.

```jsx
import * as React from "react";
import { Link } from "react-router-dom";

function UsersIndexPage({ users }) {
  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={user.id}>{user.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}
```

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

### React Router v5 App Structure

Source: https://reactrouter.com/6.30.3/upgrading/v5

Example of a React Router v5 application structure demonstrating nested routes and links using match.url and match.path.

```javascript
// This is a React Router v5 app
import {
  BrowserRouter,
  Switch,
  Route,
  Link,
  useRouteMatch,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

function Users() {
  // In v5, nested routes are rendered by the child component, so
  // you have <Switch> elements all over your app for nested UI.
  // You build nested routes and links using match.url and match.path.
  let match = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${match.url}/me`}>My Profile</Link>
      </nav>

      <Switch>
        <Route path={`${match.path}/me`}>
          <OwnUserProfile />
        </Route>
        <Route path={`${match.path}/:id`}>
          <UserProfile />
        </Route>
      </Switch>
    </div>
  );
}
```

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

### Example: Customizing Button FormAction

Source: https://reactrouter.com/6.30.3/hooks/use-form-action

Demonstrates how to use `useFormAction` to set the `formAction` for a button within a form, allowing it to trigger a specific action.

```APIDOC
## Example: Customizing Button FormAction

### Description
This example shows how to use the `useFormAction` hook to dynamically set the `formAction` attribute of a submit button. This allows the button to submit to a specific action, overriding the default form action if necessary.

### Usage
```jsx
import { useFormAction } from "react-router-dom";

function DeleteButton() {
  return (
    <button
      formAction={useFormAction("destroy")}
      formMethod="post"
    >
      Delete
    </button>
  );
}
```

### Explanation
- `useFormAction("destroy")` resolves the action to "destroy" relative to the current route.
- `formAction` is set to the resolved action, making the button submit to the "destroy" action.
- `formMethod="post"` specifies the HTTP method for the form submission.
```

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

### v6 Ranked Routes Example

Source: https://reactrouter.com/6.30.3/start/faq

This v6 example illustrates how route ranking automatically handles the correct matching of routes, even when a dynamic route like '/users/:id' is present. Specific routes like '/users/new' will rank higher.

```tsx
function App() {
  return (
    <Routes>
      <Route path="/users/:id" element={<ValidateUser />} />
      <Route path="/users/new" element={<NewUser />} />
      <Route
        path="/users/inactive"
        element={<InactiveUsers />}
      />
    </Routes>
  );
}
```

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

### Full Route Tree Example

Source: https://reactrouter.com/6.30.3/routers/create-browser-router

Defines a complete route tree structure for a React Router application, including nested routes.

```javascript
const routes = [
  {
    path: "/",
    Component: Home,
  },
  {
    id: "blog",
    path: "/blog",
    Component: BlogLayout,
    children: [
      { path: "new", Component: NewPost },
      { path: ":slug", Component: BlogPost },
    ],
  },
];
```

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

### Clone and Setup React Router Repository

Source: https://reactrouter.com/6.30.3/guides/contributing

Clone your fork of the React Router repository and checkout the 'dev' branch for code changes. Ensure you are using pnpm for dependency management.

```bash
git clone https://github.com/<your_github_username>/react-router.git
cd react-router

# if you are making *any* code changes, make sure to checkout the dev branch
git checkout dev
```

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

### Basic BrowserRouter Setup

Source: https://reactrouter.com/6.30.3/router-components/browser-router

Sets up the BrowserRouter component to wrap the rest of your React application. Ensure you have a root element with id 'root' in your HTML.

```tsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

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

root.render(
  <BrowserRouter>
    {/* The rest of your app goes here */}
  </BrowserRouter>
);
```

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

### React Router v6 App Structure

Source: https://reactrouter.com/6.30.3/upgrading/v5

Example of a React Router v6 application structure showcasing relative routing and nested Routes.

```javascript
// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link,
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}
```

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

### Nested Route Element Tree Example

Source: https://reactrouter.com/6.30.3/start/concepts

Illustrates the React element tree structure that results from nested routes matching a specific URL.

```jsx
<App>
  <Teams>
    <Team />
  </Teams>
</App>
```

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

### Basic Routes Component Usage

Source: https://reactrouter.com/6.30.3/components/routes

Demonstrates the basic structure of the Routes component with a location prop. This is a foundational example for understanding how Routes accepts children.

```tsx
interface RoutesProps {
  children?: React.ReactNode;
  location?: Partial<Location> | string;
}

<Routes location>
  <Route />
</Routes>;
```

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

### Test an Event Route with createMemoryRouter

Source: https://reactrouter.com/6.30.3/routers/create-memory-router

This example demonstrates how to use `createMemoryRouter` to test a route with a loader function. It sets up initial entries and an initial index for the history stack.

```jsx
import {
  RouterProvider,
  createMemoryRouter,
} from "react-router-dom";
import * as React from "react";
import {
  render,
  waitFor,
  screen,
} from "@testing-library/react";
import "@testing-library/jest-dom";
import CalendarEvent from "./routes/event";

test("event route", async () => {
  const FAKE_EVENT = { name: "test event" };
  const routes = [
    {
      path: "/events/:id",
      element: <CalendarEvent />,
      loader: () => FAKE_EVENT,
    },
  ];

  const router = createMemoryRouter(routes, {
    initialEntries: ["/", "/events/123"],
    initialIndex: 1,
  });

  render(<RouterProvider router={router} />);

  await waitFor(() => screen.getByRole("heading"));
  expect(screen.getByRole("heading")).toHaveTextContent(
    FAKE_EVENT.name
  );
});
```

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

### Configure initialIndex for Memory Router

Source: https://reactrouter.com/6.30.3/routers/create-memory-router

The `initialIndex` option specifies which entry in the `initialEntries` array should be the starting point for the router. It defaults to the last entry.

```tsx
createMemoryRouter(routes, {
  initialEntries: ["/", "/events/123"],
  initialIndex: 1, // start at "/events/123"
});
```

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

### Basic Form Submission Example

Source: https://reactrouter.com/6.30.3/components/form

Demonstrates a simple Form component usage for submitting data. Ensure all input elements have a 'name' attribute for their values to be included in the FormData.

```tsx
import { Form } from "react-router-dom";

function NewEvent() {
  return (
    <Form method="post" action="/events">
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Create</button>
    </Form>
  );
}
```

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

### fetcher.load() Method Example

Source: https://reactrouter.com/6.30.3/hooks/use-fetcher

Call `fetcher.load()` to imperatively load data from a route loader. This is useful when data needs to be fetched based on component state or lifecycle events.

```tsx
import { useFetcher } from "react-router-dom";

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

  useEffect(() => {
    if (fetcher.state === "idle" && !fetcher.data) {
      fetcher.load("/some/route");
    }
  }, [fetcher]);

  return <div>{fetcher.data || "Loading..."}</div>;
}
```

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

### useSearchParams Hook Usage

Source: https://reactrouter.com/6.30.3/hooks/use-search-params

This example demonstrates how to use the `useSearchParams` hook to get the current search parameters and update them when a form is submitted.

```APIDOC
## useSearchParams Hook

### Description

The `useSearchParams` hook is used to read and modify the query string in the URL for the current location. It returns an array containing the current search parameters and a function to update them.

### Usage

```tsx
import * as React from "react";
import { useSearchParams } from "react-router-dom";

function App() {
  let [searchParams, setSearchParams] = useSearchParams();

  function handleSubmit(event) {
    event.preventDefault();
    // The serialize function here would be responsible for
    // creating an object of { key: value } pairs from the
    // fields in the form that make up the query.
    let params = serializeFormQuery(event.target);
    setSearchParams(params);
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>{/* ... */}</form>
    </div>
  );
}
```

### Type Declaration

```typescript
declare function useSearchParams(
  defaultInit?: URLSearchParamsInit
): [URLSearchParams, SetURLSearchParams];

type ParamKeyValuePair = [string, string];

type URLSearchParamsInit =
  | string
  | ParamKeyValuePair[]
  | Record<string, string | string[]>
  | URLSearchParams;

type SetURLSearchParams = (
  nextInit?: 
    | URLSearchParamsInit
    | ((prev: URLSearchParams) => URLSearchParamsInit),
  navigateOpts?: : NavigateOptions
) => void;

interface NavigateOptions {
  replace?: boolean;
  state?: any;
  preventScrollReset?: boolean;
}
```

### Notes

- The `setSearchParams` function works similarly to `navigate`, but specifically for the search portion of the URL.
- The second argument to `setSearchParams` is of the same type as the second argument to `navigate`.
```

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

### Project File Structure

Source: https://reactrouter.com/6.30.3/start/tutorial

After setting up the project, ensure your 'src' directory contains only these essential files for the tutorial: 'contacts.js', 'index.css', and 'main.jsx'.

```text
src
├── contacts.js
├── index.css
└── main.jsx
```

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

### Filter List Data in Loader for GET Submissions

Source: https://reactrouter.com/6.30.3/start/tutorial

Implement data filtering within the `loader` function when using GET form submissions. This approach is suitable because GET requests only change the URL, similar to a link click, and do not invoke an `action`.

```jsx
export async function loader({ request }) {
  const url = new URL(request.url);
  const q = url.searchParams.get("q");
  const contacts = await getContacts(q);
  return { contacts };
}
```

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

### Install @reach/router v1.3.3

Source: https://reactrouter.com/6.30.3/upgrading/reach

Install the latest version of @reach/router to prepare for the React Router v6 upgrade. This step should be followed by deploying the application.

```sh
npm install @reach/router@latest
```

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

### Reach Router Redirect Example

Source: https://reactrouter.com/6.30.3/upgrading/reach

This example shows the syntax for redirects in the older @reach/router library, which is no longer supported in React Router v6.

```jsx
<Router>
  <Home path="/" />
  <Users path="/events" />
  <Redirect from="/dashboard" to="/events" />
</Router>
```

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

### Get Navigation Type

Source: https://reactrouter.com/6.30.3/hooks/use-navigation-type

Use the useNavigationType hook to get the current navigation action. This hook returns one of 'POP', 'PUSH', or 'REPLACE'.

```tsx
import { useNavigationType } from "react-router-dom";

function MyComponent() {
  const navigationType = useNavigationType();

  return (
    <p>You arrived here via: {navigationType}</p>
  );
}
```

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

### createMemoryRouter Usage

Source: https://reactrouter.com/6.30.3/routers/create-memory-router

Demonstrates how to use `createMemoryRouter` with initial entries and an initial index for testing.

```APIDOC
## `createMemoryRouter`

### Description
Creates a router that manages its history stack in memory, useful for testing and non-browser environments.

### Method Signature
```typescript
function createMemoryRouter(routes: RouteObject[], opts?: {
  basename?: string;
  future?: FutureConfig;
  hydrationData?: HydrationState;
  initialEntries?: InitialEntry[];
  initialIndex?: number;
}): RemixRouter;
```

### Parameters
#### `routes`
- **RouteObject[]** - An array of route objects defining the application's routes.

#### `opts` (Optional)
- **`basename`** (string) - The base URL for the router.
- **`future`** (FutureConfig) - Future configuration options.
- **`hydrationData`** (HydrationState) - Data for hydration.
- **`initialEntries`** (InitialEntry[]) - The initial entries in the history stack. Allows starting with multiple locations.
  Example:
  ```typescript
  createMemoryRouter(routes, {
    initialEntries: ["/", "/events/123"],
  });
  ```
- **`initialIndex`** (number) - The initial index in the history stack to render. Defaults to the last entry in `initialEntries`.
  Example:
  ```typescript
  createMemoryRouter(routes, {
    initialEntries: ["/", "/events/123"],
    initialIndex: 1, // start at "/events/123"
  });
  ```

### Returns
- **RemixRouter** - The created memory router instance.
```

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

### Basic RouterProvider Usage

Source: https://reactrouter.com/6.30.3/routers/router-provider

Demonstrates how to create a browser router and render the application using RouterProvider. Includes a fallback element for initial loading.

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

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
      },
      {
        path: "about",
        element: <About />,
      },
    ],
  },
]);

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

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

### Root Application Rendering with Routes

Source: https://reactrouter.com/6.30.3/start/concepts

This is the entry point of a React application, setting up the main routing structure with nested routes.

```jsx
const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Home />} />
        <Route path="teams" element={<Teams />}>
          <Route path=":teamId" element={<Team />} />
          <Route path="new" element={<NewTeamForm />} />
          <Route index element={<LeagueStandings />} />
        </Route>
      </Route>
      <Route element={<PageLayout />}>
        <Route path="/privacy" element={<Privacy />} />
        <Route path="/tos" element={<Tos />} />
      </Route>
      <Route path="contact-us" element={<Contact />} />
    </Routes>
  </BrowserRouter>
);
```

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

### Ranked Route Matching Example

Source: https://reactrouter.com/6.30.3/start/overview

React Router prioritizes more specific routes. In this example, `/teams/new` is preferred over `/teams/:teamId` for the URL `/teams/new` because it has more static segments.

```jsx
<Route path="/teams/:teamId" />
<Route path="/teams/new" />
```

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

### Basic Client-Side Routing Setup

Source: https://reactrouter.com/6.30.3/start/overview

Sets up a basic client-side router with two routes: a home page and an about page. Use this to enable navigation within your React application without server requests.

```jsx
import * as React from "react";
import { createRoot } from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: (
      <div>
        <h1>Hello World</h1>
        <Link to="about">About Us</Link>
      </div>
    ),
  },
  {
    path: "about",
    element: <div>About</div>,
  },
]);

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

```

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

### GET Form Submission

Source: https://reactrouter.com/6.30.3/components/form

Use this snippet for forms that navigate the user and update the URL with search parameters without calling an action. The default method is 'get'.

```tsx
<Form method="get" action="/products">
  <input
    aria-label="search products"
    type="text"
    name="q"
  />
  <button type="submit">Search</button>
</Form>
```

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

### React Router v5 Route Composition Example

Source: https://reactrouter.com/6.30.3/start/faq

In v5, `<Route>` components rendered directly and could contain other routes. This example shows a `MyRoute` component rendering a `<Route>` with children.

```tsx
let App = () => (
  <div>
    <MyRoute />
  </div>
);

let MyRoute = ({ element, ...rest }) => {
  return (
    <Route path="/my-route" children={<p>Hello!</p>} />
  );
};
```

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

### Create and Render Browser Router in main.jsx

Source: https://reactrouter.com/6.30.3/start/tutorial

Sets up the main entry point for the application with React Router. It creates a browser router and renders the application within it. This is the first step to enable client-side routing.

```jsx
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import "./index.css";

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

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

```

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

### fetcher.submit() Method Example

Source: https://reactrouter.com/6.30.3/hooks/use-fetcher

Use `fetcher.submit()` for imperative form submissions, typically when the submission is initiated programmatically rather than by direct user interaction. This example shows logging out a user after a period of inactivity.

```tsx
import { useFetcher } from "react-router-dom";
import { useFakeUserIsIdle } from "./fake/hooks";

export function useIdleLogout() {
  const fetcher = useFetcher();
  const userIsIdle = useFakeUserIsIdle();

  useEffect(() => {
    if (userIsIdle) {
      fetcher.submit(
        { idle: true },
        { method: "post", action: "/logout" }
      );
    }
  }, [userIsIdle]);
}
```

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

### Accessing GET Parameters in Loader

Source: https://reactrouter.com/6.30.3/components/form

This snippet shows how to access URL search parameters within a route loader when using a GET form submission. It demonstrates creating a URL object from the request.

```tsx
<Route
  path="/products"
  loader={async ({ request }) => {
    let url = new URL(request.url);
    let searchTerm = url.searchParams.get("q");
    return fakeSearchProducts(searchTerm);
  }}
/>
```

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

### Configuring Routes with Error Handling

Source: https://reactrouter.com/6.30.3/hooks/use-route-error

Demonstrates how to set up an `errorElement` for a route and includes examples of potential errors that can occur in loaders, actions, and during rendering. Errors thrown in actions can be `Response` objects.

```jsx
<Route
  errorElement={<ErrorBoundary />}
  loader={() => {
    // unexpected errors in loaders/actions
    something.that.breaks();
  }}
  action={() => {
    // stuff you throw on purpose in loaders/actions
    throw new Response("Bad Request", { status: 400 });
  }}
  element={
    // and errors thrown while rendering
    <div>{breaks.while.rendering}</div>
  }
/>
```

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

### Server-Side Rendering with createStaticHandler

Source: https://reactrouter.com/6.30.3/routers/create-static-handler

This example demonstrates how to use createStaticHandler to fetch data and handle submissions on the server before rendering the React application. It includes setting up routes, creating a fetch request, querying data, and rendering the application using StaticRouterProvider. If a redirect response is encountered, it's thrown to be handled by the server.

```jsx
import {
  createStaticHandler,
  createStaticRouter,
  StaticRouterProvider,
} from "react-router-dom/server";
import Root, {
  loader as rootLoader,
  ErrorBoundary as RootBoundary,
} from "./root";

const routes = [
  {
    path: "/",
    loader: rootLoader,
    Component: Root,
    ErrorBoundary: RootBoundary,
  },
];

export async function renderHtml(req) {
  let { query, dataRoutes } = createStaticHandler(routes);
  let fetchRequest = createFetchRequest(req);
  let context = await query(fetchRequest);

  // If we got a redirect response, short circuit and let our Express server
  // handle that directly
  if (context instanceof Response) {
    throw context;
  }

  let router = createStaticRouter(dataRoutes, context);
  return ReactDOMServer.renderToString(
    <React.StrictMode>
      <StaticRouterProvider
        router={router}
        context={context}
      />
    </React.StrictMode>
  );
}

```

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

### Use <Form> for Client-Side GET Submissions

Source: https://reactrouter.com/6.30.3/start/tutorial

Replace HTML's `<form>` with React Router's `<Form>` component to enable client-side routing for GET requests. This component handles the form submission by changing the URL.

```jsx
<Form id="search-form" role="search">
  <input
    id="q"
    aria-label="Search contacts"
    placeholder="Search"
    type="search"
    name="q"
  />
  <div id="search-spinner" aria-hidden hidden={true} />
  <div className="sr-only" aria-live="polite"></div>
</Form>
```

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

### Create Express Server Handler

Source: https://reactrouter.com/6.30.3/guides/ssr

Set up an Express server to handle incoming requests. Use `createStaticHandler` to initialize the data router handler with your defined routes.

```jsx
const express = require("express");
const {
  createStaticHandler,
} = require("react-router-dom/server");

const createFetchRequest = require("./request");
const routes = require("./routes");

const app = express();

let handler = createStaticHandler(routes);

app.get("*", async (req, res) => {
  let fetchRequest = createFetchRequest(req, res);
  let context = await handler.query(fetchRequest);

  // We'll tackle rendering next...
});

const listener = app.listen(3000, () => {
  let { port } = listener.address();
  console.log(`Listening on port ${port}`);
});
```

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

### Automatic Logout Example

Source: https://reactrouter.com/6.30.3/hooks/use-submit

Illustrates using `useSubmit` to automatically log out a user after a period of inactivity.

```APIDOC
## useSubmit with Timeout

### Description
This example shows how to use `useSubmit` within a custom hook to trigger an action after a set delay, simulating an automatic logout after user inactivity.

### Example
```tsx lines=[1,10,15]
import { useSubmit, useLocation } from "react-router-dom";
import { useEffect } from "react";

function AdminPage() {
  useSessionTimeout();
  return <div>{/* ... */}</div>;
}

function useSessionTimeout() {
  const submit = useSubmit();
  const location = useLocation();

  useEffect(() => {
    const timer = setTimeout(() => {
      submit(null, { method: "post", action: "/logout" });
    }, 5 * 60_000); // 5 minutes

    return () => clearTimeout(timer);
  }, [submit, location]);
}
```

### Submit Target
In this example, `submit(null, ...)` is used, indicating no specific form element is being submitted directly, but rather a navigation action is being triggered.

### Submit Options
- `method`: "post"
- `action`: "/logout"

This configuration triggers a POST request to the `/logout` endpoint after the timeout.
```

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

### Basic useFetcher Usage

Source: https://reactrouter.com/6.30.3/hooks/use-fetcher

Demonstrates how to import and use the `useFetcher` hook. It shows calling `submit` or `load` within a `useEffect` and accessing fetcher properties like `state`, `data`, and rendering a `<fetcher.Form>` for non-navigating submissions.

```tsx
import { useFetcher } from "react-router-dom";

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

  // call submit or load in a useEffect
  React.useEffect(() => {
    fetcher.submit(data, options);
    fetcher.load(href);
  }, [fetcher]);

  // build your UI with these properties
  fetcher.state;
  fetcher.formData;
  fetcher.json;
  fetcher.text;
  fetcher.formMethod;
  fetcher.formAction;
  fetcher.data;

  // render a form that doesn't cause navigation
  return <fetcher.Form />;
}
```

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

### Create a Browser Router with Routes

Source: https://reactrouter.com/6.30.3/routers/create-browser-router

Use `createBrowserRouter` to set up routing for your web application. Define your routes, including nested routes and their associated loaders, and then pass the router instance to `RouterProvider`.

```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

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

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

### Import and Use useActionData Hook

Source: https://reactrouter.com/6.30.3/hooks/use-action-data

Import the hook from 'react-router-dom' and call it within your component to get the action data.

```tsx
import { useActionData } from "react-router-dom";

function SomeComponent() {
  let actionData = useActionData();
  // ...
}
```

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

### Update to Latest v6

Source: https://reactrouter.com/6.30.3/upgrading/future

Install the latest minor version of React Router DOM to access the newest future flags.

```shellscript
npm install react-router-dom@6
```

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

### Enabling Future Flags with `createStaticRouter` Options

Source: https://reactrouter.com/6.30.3/routers/create-static-router

This example shows how to enable future flags, such as `v7_partialHydration`, when creating a static router. This is recommended for adopting new features and easing migration to future versions.

```js
const router = createBrowserRouter(routes, {
  future: {
    // Opt-into partial hydration
    v7_partialHydration: true,
  },
});
```

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

### v5 Nested Routes Example

Source: https://reactrouter.com/6.30.3/start/faq

Demonstrates how nested routes were handled in React Router v5 using `<Switch>` components.

```tsx
function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Switch>
        <Route path="/users/account" component={Account} />
      </Switch>
    </div>
  );
}
```

```tsx
// somewhere up the tree
<Switch>
  <Route path="/users" component={Users} />
</Switch>;
```

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

### Creating a Browser Router with Dynamic Route Patching

Source: https://reactrouter.com/6.30.3/routers/create-browser-router

Initializes a browser router with a minimal set of routes and configures `patchRoutesOnNavigation` to dynamically add routes based on the navigation path.

```javascript
const router = createBrowserRouter(
  [
    {
      path: "/",
      Component: Home,
    },
  ],
  {
    patchRoutesOnNavigation({ path, patch }) {
      if (path === "/blog/new") {
        patch("blog", [
          {
            path: "new",
            Component: NewPost,
          },
        ]);
      } else if (path.startsWith("/blog")) {
        patch("blog", [
          {
            path: ":slug",
            Component: BlogPost,
          },
        ]);
      }
    },
  }
);
```

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

### Basic App Structure with Routes

Source: https://reactrouter.com/6.30.3/upgrading/v6-data

This is a typical React application structure using BrowserRouter and Routes to define application routes.

```jsx
export default function App() {
  return (
    <BrowserRouter>
      <header>
        <h1>My Super Cool App</h1>
        <NavMenu />
      </header>
      <main>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/blog/*" element={<BlogApp />} />
          <Route path="/users/*" element={<UserApp />} />
        </Routes>
      </main>
      <footer>©️ me 2023</footer>
    </BrowserRouter>
  );
}
```

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

### Custom Link Component with useLinkPressHandler

Source: https://reactrouter.com/6.30.3/hooks/use-link-press-handler

Example of creating a custom Link component using the useLinkPressHandler hook for navigation in react-router-native.

```tsx
import { TouchableHighlight } from "react-native";
import { useLinkPressHandler } from "react-router-native";

function Link({
  onPress,
  replace = false,
  state,
  to,
  ...rest
}) {
  let handlePress = useLinkPressHandler(to, {
    replace,
    state,
  });

  return (
    <TouchableHighlight
      {...rest}
      onPress={(event) => {
        onPress?.(event);
        if (!event.defaultPrevented) {
          handlePress(event);
        }
      }}
    />
  );
}
```

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

### Form Component Usage

Source: https://reactrouter.com/6.30.3/components/form

Example of how to use the Form component to submit data. Ensure inputs have names for FormData inclusion.

```APIDOC
## `<Form>` Component

### Description
A wrapper around a plain HTML form that emulates the browser for client-side routing and data mutations. It is not a form validation or state management library.

### Usage
```tsx
import { Form } from "react-router-dom";

function NewEvent() {
  return (
    <Form method="post" action="/events">
      <input type="text" name="title" />
      <input type="text" name="description" />
      <button type="submit">Create</button>
    </Form>
  );
}
```

### Props
This component accepts standard HTML form attributes, plus additional props for routing:

- `method`: HTTP method for the form submission (`get`, `post`, `put`, `patch`, `delete`). Defaults to `get`.
- `encType`: Encoding type for the form data (`application/x-www-form-urlencoded`, `multipart/form-data`, `text/plain`).
- `action`: The URL to submit the form data to.
- `onSubmit`: A handler for the form's submit event.
- `fetcherKey`: A key for the fetcher.
- `navigate`: If true, the form submission will trigger a navigation.
- `preventScrollReset`: If true, prevents the scroll position from resetting on navigation.
- `relative`: Defines the navigation relativity (`route` or `path`).
- `reloadDocument`: If true, the document will be reloaded on submission.
- `replace`: If true, the navigation will replace the current entry in the history stack.
- `state`: Any state to be passed with the navigation.
- `viewTransition`: If true, enables view transitions for the submission.

### Notes
- Inputs within the Form component must have a `name` attribute for their values to be included in the `FormData`.
- This feature requires a data router to be configured.
- Use `useNavigation` to monitor submission status and build pending indicators.
- For non-navigation related data mutations, consider using `useFetcher`.
```

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

### Render HTML with StaticRouterProvider

Source: https://reactrouter.com/6.30.3/guides/ssr

After fetching data, create a static router and render the application to HTML using `ReactDOMServer.renderToString`. This HTML is sent to the client.

```jsx
app.get("*", async (req, res) => {
  let fetchRequest = createFetchRequest(req, res);
  let context = await handler.query(fetchRequest);

  let router = createStaticRouter(
    handler.dataRoutes,
    context
  );
  let html = ReactDOMServer.renderToString(
    <StaticRouterProvider
      router={router}
      context={context}
    />
  );

  res.send("<!DOCTYPE html>" + html);
});
```

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

### Simple URL Redirect

Source: https://reactrouter.com/6.30.3/fetch/redirect

Demonstrates the basic usage of the `redirect` function with just a URL string.

```js
redirect("/login");
```

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

### Create Edit Component File

Source: https://reactrouter.com/6.30.3/start/tutorial

Use the `touch` command to create a new JSX file for the edit component.

```bash
touch src/routes/edit.jsx
```

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

### Enable Fetcher Persistence with future.v7_fetcherPersist

Source: https://reactrouter.com/6.30.3/start/changelog

Opt into the new fetcher persistence behavior by setting the `future.v7_fetcherPersist` flag. Fetchers will now remain mounted until they return to an `idle` state, simplifying pending UI.

```javascript
{
  future: {
    v7_fetcherPersist: true
  }
}
```

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

### Import and Use useFetchers

Source: https://reactrouter.com/6.30.3/hooks/use-fetchers

Import and use the useFetchers hook to get an array of inflight fetchers. This feature requires a data router.

```tsx
import { useFetchers } from "react-router-dom";

function SomeComp() {
  const fetchers = useFetchers();
  // array of inflight fetchers
}
```

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

### Configure Route Action in React Router

Source: https://reactrouter.com/6.30.3/start/tutorial

Imports and assigns the root action to the root route configuration within the createBrowserRouter setup.

```jsx
/* other imports */

import Root, {
  loader as rootLoader,
  action as rootAction,
} from "./routes/root";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: "contacts/:contactId",
        element: <Contact />,
      },
    ],
  },
]);
```

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

### Express Server for SSR

Source: https://reactrouter.com/6.30.3/guides/ssr

A basic Express server setup that uses `ReactDOMServer.renderToString` and `StaticRouter` to render the React application on the server. It handles incoming requests and sends back the rendered HTML.

```javascript
import express from "express";
import ReactDOMServer from "react-dom/server";
import { StaticRouter } from "react-router-dom/server";
import App from "./App";

let app = express();

app.get("*", (req, res) => {
  let html = ReactDOMServer.renderToString(
    <StaticRouter location={req.url}>
      <App />
    </StaticRouter>
  );
  res.send("<!DOCTYPE html>" + html);
});

app.listen(3000);
```

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

### Programmatic Form Submission with useSubmit

Source: https://reactrouter.com/6.30.3/hooks/use-submit

Use `useSubmit` to programmatically submit a form, for example, on input change. This hook requires a data router.

```tsx
import { useSubmit, Form } from "react-router-dom";

function SearchField() {
  let submit = useSubmit();
  return (
    <Form
      onChange={(event) => {
        submit(event.currentTarget);
      }}> 
      <input type="text" name="search" />
      <button type="submit">Search</button>
    </Form>
  );
}
```

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

### Redirect as a Response Shortcut

Source: https://reactrouter.com/6.30.3/fetch/redirect

Illustrates that `redirect` is a syntactic sugar for creating a `Response` object with specific status and headers for redirection.

```jsx
new Response("", {
  status: 302,
  headers: {
    Location: someUrl,
  },
});
```

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

### Configure initialEntries for Memory Router

Source: https://reactrouter.com/6.30.3/routers/create-memory-router

The `initialEntries` option allows you to pre-populate the history stack with multiple locations, useful for testing navigation scenarios like going back.

```tsx
createMemoryRouter(routes, {
  initialEntries: ["/", "/events/123"],
});
```

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

### useAsyncError Usage

Source: https://reactrouter.com/6.30.3/hooks/use-async-error

This example demonstrates how to use the useAsyncError hook within an error element to display an error message when a deferred route fails.

```APIDOC
## `useAsyncError` Hook

### Description
Returns the rejection value from the nearest `<Await>` component. This is useful for displaying error messages when asynchronous data loading fails.

### Usage
```tsx
import { useAsyncError, Await } from "react-router-dom";

function ErrorElement() {
  const error = useAsyncError();
  return (
    <p>Uh Oh, something went wrong! {error.message}</p>
  );
}

<Await
  resolve={promiseThatRejects}
  errorElement={<ErrorElement />}
/>;
```

### Related Links
- [Deferred Data Guide][deferred]
- [`<Await>` documentation][await docs]

[await docs]: ../components/await
[deferred]: ../guides/deferred
```

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

### Accessing navigation.formMethod

Source: https://reactrouter.com/6.30.3/hooks/use-navigation

Use `navigation.formMethod` to access the submission method (e.g., 'POST') when navigating from a `<Form>` or `useSubmit`. This property is empty for GET requests.

```tsx
function SubmitButton() {
  const navigation = useNavigation();
  if (navigation.formMethod) {
    console.log(navigation.formMethod); // post
  }

  return (
    <Form method="POST">
      <button>Submit</button>
    </Form>
  );
}
```

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

### Create Contact Route Module

Source: https://reactrouter.com/6.30.3/start/tutorial

Use the touch command to create a new JSX file for the contact route component.

```sh
touch src/routes/contact.jsx
```
Tokens:
Raw