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
The path pattern to match. Supports URL parameters with : and wildcards with *.<Route path="/" />
<Route path="about" />
<Route path="users/:id" />
<Route path="files/*" />
The React element to render when this route matches. Mutually exclusive with Component.<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
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} />
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>
Whether the path should be case-sensitive. Defaults to false.<Route path="About" caseSensitive element={<About />} />
{/* Matches /About but not /about */}
The route loader function. See the loader documentation.<Route
path="users/:id"
loader={({ params }) => fetchUser(params.id)}
element={<User />}
/>
The route action function. See the action documentation.<Route
path="users/:id/edit"
action={({ request, params }) => updateUser(params.id, request)}
element={<EditUser />}
/>
The React element to render if an error occurs in this route. Mutually exclusive with ErrorBoundary.<Route
path="/"
element={<Home />}
errorElement={<ErrorPage />}
/>
The React component to render if an error occurs in this route. Mutually exclusive with errorElement.<Route path="/" element={<Home />} ErrorBoundary={ErrorPage} />
A function that returns a promise resolving to the route object. Used for code-splitting routes.<Route path="admin" lazy={() => import("./admin-route")} />
Any application-specific data. This is useful for breadcrumbs, page titles, etc.<Route
path="users/:id"
element={<User />}
handle={{ crumb: (data) => data.user.name }}
/>
A unique identifier for this route. Auto-generated if not provided.
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