Configures an element to render when a pattern matches the current location.
It must be rendered within a Routes
element. Note that these routes
do not participate in data loading, actions, code splitting, or any other
route module features.
// Usually used in a declarative router
function App() {
return (
<BrowserRouter>
<Routes>
<Route index element={<StepOne />} />
<Route path="step-2" element={<StepTwo />} />
<Route path="step-3" element={<StepThree />} />
</Routes>
</BrowserRouter>
);
}
// But can be used with a data router as well if you prefer the JSX notation
const routes = createRoutesFromElements(
<>
<Route index loader={step1Loader} Component={StepOne} />
<Route path="step-2" loader={step2Loader} Component={StepTwo} />
<Route path="step-3" loader={step3Loader} Component={StepThree} />
</>
);
const router = createBrowserRouter(routes);
function App() {
return <RouterProvider router={router} />;
}
function Route(props: RouteProps): React.ReactElement | null
The route action.
See action
.
Whether the path should be case-sensitive. Defaults to false
.
The React Component to render when this route matches.
Mutually exclusive with element
.
Child Route components
The React element to render when this Route matches.
Mutually exclusive with Component
.
The React Component to render at this route if an error occurs.
Mutually exclusive with errorElement
.
The React element to render at this route if an error occurs.
Mutually exclusive with ErrorBoundary
.
The route handle.
The React Component to render while this router is loading data.
Mutually exclusive with hydrateFallbackElement
.
The React element to render while this router is loading data.
Mutually exclusive with HydrateFallback
.
The unique identifier for this route (for use with DataRouter
s)
Whether this is an index route.
A function that returns a promise that resolves to the route object.
Used for code-splitting routes.
See lazy
.
The route loader.
See loader
.
The path pattern to match. If unspecified or empty, then this becomes a layout route.
The route shouldRevalidate function.
See shouldRevalidate
.