路由
本页内容

Route

摘要

参考文档 ↗

当模式与当前位置匹配时,配置要渲染的元素。它必须在 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

路由操作。请参阅 action

caseSensitive

路径是否应区分大小写。默认为 false

Component

当此路由匹配时要渲染的 React 组件。与 element 互斥。

children

子路由组件

element

当此路由匹配时要渲染的 React 元素。与 Component 互斥。

ErrorBoundary

如果发生错误,在此路由处要渲染的 React 组件。与 errorElement 互斥。

errorElement

如果发生错误,在此路由处要渲染的 React 元素。与 ErrorBoundary 互斥。

handle

路由句柄。

HydrateFallback

此路由器加载数据时要渲染的 React 组件。与 hydrateFallbackElement 互斥。

hydrateFallbackElement

此路由器加载数据时要渲染的 React 元素。与 HydrateFallback 互斥。

id

此路由的唯一标识符(用于 DataRouter

index

这是否为索引路由。

lazy

一个返回解析为路由对象的 promise 的函数。用于代码分割路由。请参阅 lazy

loader

路由加载器。请参阅 loader

path

要匹配的路径模式。如果未指定或为空,则这成为布局路由。

shouldRevalidate

路由 shouldRevalidate 函数。请参阅 shouldRevalidate

文档和示例 CC 4.0
编辑