reactjs - 我如何在路由的元素上使用 react-router v6.4 的 loader 功能？

我升级到了 [email ，我想使用 loader 属性。

我的路由器长这样：

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route path="/" element={<PublicRoute />}>
        <Route path="/" element={<Login />} />
      </Route>
      <Route path="/home" element={<PrivateRoute />}>
        <Route path="/home" element={<Home />}>
          <Route path="dashboard/*" element={<DashboardRoutes />} />
          <Route path="projectSettings/*" element={<ProjectSettingsRoutes />} />
          <Route path="settings/*" element={<SettingsRoutes />} />
          <Route path="testDevelopment/*" element={<TestDevelopmentRoutes />} />
          <Route index element={<Navigate to={'dashboard'} replace />} />
        </Route>
      </Route>
    </Route>,
  ),
);

type props = {
  instance: PublicClientApplication;
};

const Router: FC<props> = ({ instance }) => {
  return (
    <MsalProvider instance={instance}>
      <RouterProvider router={router} />
    </MsalProvider>
  );
};

如您所见，这些路由会渲染也进行路由的元素。例如，我想在位于 TestDevelopment 下的 UiElements 组件中使用加载器来获取元素，因此元素 TestDevelopmentRoutes 看起来像这样：

const TestDevelopmentRoutes = () => {
  return (
    <Routes>
      <Route path="" element={<TestDevelopment />}>
        <Route path="customFunctions" element={<CustomFunctions />} />
        <Route path="requirements" element={<Requirements />} />
        <Route path="runResults" element={<RunResults />} />
        <Route path="testCases" element={<TestCases />}>
          <Route path="table" element={<TestCasesTable />} />
        </Route>
        <Route index element={<Navigate to={'testCases'} replace />} />
        <Route path="testPlans" element={<TestPlans />} />
        <Route path="testSuites" element={<TestSuites />} />
        <Route path="uiElements" element={<UiElements />} loader={uiElementsLoader} />
        <Route path="uploads" element={<Uploads />} />
      </Route>
    </Routes>
  );
};

获取请求没有发生，因为我不能再使用 Routes 来启用加载器功能，但我不确定应该如何在 TestDevelopmentRoutes 上编写路由才能让它工作。

答案＃1

在创建数据路由器时，加载器必须即时传递。这是因为在编译/转译时，新数据路由器不可能知道它在运行时将渲染哪些后代路由。所有“测试开发”路由都需要移动到配置中。

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route>
      <Route element={<PublicRoute />}>
        <Route path="/" element={<Login />} />
      </Route>
      <Route element={<PrivateRoute />}>
        <Route path="/home" element={<Home />}>
          <Route path="dashboard/*" element={<DashboardRoutes />} />
          <Route path="projectSettings/*" element={<ProjectSettingsRoutes />} />
          <Route path="settings/*" element={<SettingsRoutes />} />

          <Route path="testDevelopment" element={<TestDevelopment />}>
            <Route index element={<Navigate to="testCases" replace />} />
            <Route path="customFunctions" element={<CustomFunctions />} />
            <Route path="requirements" element={<Requirements />} />
            <Route path="runResults" element={<RunResults />} />
            <Route path="testCases" element={<TestCases />}>
              <Route path="table" element={<TestCasesTable />} />
            </Route>
            <Route path="testPlans" element={<TestPlans />} />
            <Route path="testSuites" element={<TestSuites />} />
            <Route
              path="uiElements"
              element={<UiElements />}
              loader={uiElementsLoader}
            />
            <Route path="uploads" element={<Uploads />} />
          </Route>

          <Route index element={<Navigate to={'dashboard'} replace />} />
        </Route>
      </Route>
    </Route>,
  ),
);

...

type props = {
  instance: PublicClientApplication;
};

const Router: FC<props> = ({ instance }) => {
  return (
    <MsalProvider instance={instance}>
      <RouterProvider router={router} />
    </MsalProvider>
  );
};