Route

Configures an element to render when a pattern matches the current location. It must be rendered within a <Routes> element.

import { Route, Routes } from "react-router";

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="users/:id" element={<User />} />
</Routes>

Type Declaration

export interface PathRouteProps {
  caseSensitive?: boolean;
  path?: string;
  id?: string;
  lazy?: LazyRouteFunction<NonIndexRouteObject>;
  middleware?: RouteMiddleware;
  loader?: RouteLoader;
  action?: RouteAction;
  hasErrorBoundary?: boolean;
  shouldRevalidate?: ShouldRevalidateFunction;
  handle?: any;
  index?: false;
  children?: React.ReactNode;
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
}

export interface IndexRouteProps {
  caseSensitive?: boolean;
  path?: string;
  id?: string;
  lazy?: LazyRouteFunction<IndexRouteObject>;
  middleware?: RouteMiddleware;
  loader?: RouteLoader;
  action?: RouteAction;
  hasErrorBoundary?: boolean;
  shouldRevalidate?: ShouldRevalidateFunction;
  handle?: any;
  index: true;
  children?: undefined;
  element?: React.ReactNode | null;
  hydrateFallbackElement?: React.ReactNode | null;
  errorElement?: React.ReactNode | null;
  Component?: React.ComponentType | null;
  HydrateFallback?: React.ComponentType | null;
  ErrorBoundary?: React.ComponentType | null;
}

export type RouteProps = PathRouteProps | IndexRouteProps;

export function Route(props: RouteProps): React.ReactElement | null;

Props

path · string

The path pattern to match. Supports URL parameters with : and wildcards with *.

<Route path="/" />
<Route path="about" />
<Route path="users/:id" />
<Route path="files/*" />

element · React.ReactNode

The React element to render when this route matches. Mutually exclusive with Component.

<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />

Component · React.ComponentType

The React component to render when this route matches. Mutually exclusive with element. Useful for code splitting.

<Route path="/" Component={Home} />
<Route path="about" Component={About} />

index · boolean

Whether this is an index route. Index routes render when the parent route’s path matches exactly.

<Route path="users" element={<UsersLayout />}>
  <Route index element={<UsersList />} /> {/* Renders at /users */}
  <Route path=":id" element={<UserProfile />} /> {/* Renders at /users/:id */}
</Route>

caseSensitive · boolean

Whether the path should be case-sensitive. Defaults to false.

<Route path="About" caseSensitive element={<About />} />
{/* Matches /About but not /about */}

loader · RouteLoader

The route loader function. See the loader documentation.

<Route
  path="users/:id"
  loader={({ params }) => fetchUser(params.id)}
  element={<User />}
/>

action · RouteAction

The route action function. See the action documentation.

<Route
  path="users/:id/edit"
  action={({ request, params }) => updateUser(params.id, request)}
  element={<EditUser />}
/>

errorElement · React.ReactNode

The React element to render if an error occurs in this route. Mutually exclusive with ErrorBoundary.

<Route
  path="/"
  element={<Home />}
  errorElement={<ErrorPage />}
/>

ErrorBoundary · React.ComponentType

The React component to render if an error occurs in this route. Mutually exclusive with errorElement.

<Route path="/" element={<Home />} ErrorBoundary={ErrorPage} />

lazy · LazyRouteFunction

A function that returns a promise resolving to the route object. Used for code-splitting routes.

<Route path="admin" lazy={() => import("./admin-route")} />

handle · any

Any application-specific data. This is useful for breadcrumbs, page titles, etc.

<Route
  path="users/:id"
  element={<User />}
  handle={{ crumb: (data) => data.user.name }}
/>

id · string

A unique identifier for this route. Auto-generated if not provided.

children · React.ReactNode

Nested route elements.

<Route path="users" element={<UsersLayout />}>
  <Route index element={<UsersList />} />
  <Route path=":id" element={<UserProfile />} />
</Route>

Examples

Basic Route

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

Dynamic Segments

<Routes>
  <Route path="users/:userId" element={<User />} />
  <Route path="posts/:postId/comments/:commentId" element={<Comment />} />
</Routes>

Nested Routes

<Routes>
  <Route path="users" element={<UsersLayout />}>
    <Route index element={<UsersList />} />
    <Route path=":id" element={<UserProfile />} />
    <Route path=":id/edit" element={<EditUser />} />
  </Route>
</Routes>

With Data Loading

<Route
  path="users/:id"
  loader={async ({ params }) => {
    const user = await fetchUser(params.id);
    return { user };
  }}
  element={<User />}
  errorElement={<UserError />}
/>

Splat Routes

<Routes>
  <Route path="files/*" element={<Files />} />
  <Route path="*" element={<NotFound />} />
</Routes>

Notes

• A <Route> should only be used as a child of <Routes>
• Index routes cannot have children
• Routes are ranked by specificity during matching
• Use <Outlet /> in parent route elements to render child routes