当模式与当前位置匹配时,配置要渲染的元素。它必须在 Routes
元素内渲染。请注意,这些路由不参与数据加载、操作、代码分割或任何其他路由模块功能。
// 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
路由操作。请参阅 action
。
路径是否应区分大小写。默认为 false
。
当此路由匹配时要渲染的 React 组件。与 element
互斥。
子路由组件
当此路由匹配时要渲染的 React 元素。与 Component
互斥。
如果发生错误,在此路由处要渲染的 React 组件。与 errorElement
互斥。
如果发生错误,在此路由处要渲染的 React 元素。与 ErrorBoundary
互斥。
路由句柄。
此路由器加载数据时要渲染的 React 组件。与 hydrateFallbackElement
互斥。
此路由器加载数据时要渲染的 React 元素。与 HydrateFallback
互斥。
此路由的唯一标识符(用于 DataRouter
)
这是否为索引路由。
一个返回解析为路由对象的 promise 的函数。用于代码分割路由。请参阅 lazy
。
路由加载器。请参阅 loader
。
要匹配的路径模式。如果未指定或为空,则这成为布局路由。
路由 shouldRevalidate 函数。请参阅 shouldRevalidate
。