React 路由器路由加载器不适用于嵌套组件

我正在使用 React Router v6，我想在组件加载之前使用新的加载器来加载数据。所以我有以下内容

在我的index.js中

const router = createBrowserRouter(
createRoutesFromElements(
    <Route path="*"
           loader={async ({ params }) => {

               console.log("index loader log"); //this logs

               return true;
           }}
           element={<App />}
     > </Route>
  )
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <RouterProvider router={router} />
);

在我的应用程序组件中，我有嵌套的路由，例如

const App = () => {
 return (
     <>
        <Routes>
            <Route path="auth/*" element={<AuthLayout/>}/>
            <Route path="about"
             loader={async ({ params }) => {

               console.log("about child loader log"); //this doesnt log

               return true;
              }}
           element={<AboutPage/>}/>
        </Routes>
        <h1>Testing app</h1>
     </>

   );

 }

在应用程序组件上的加载程序Route path="about"当我访问 about 路由但组件已渲染时，不会 console.log 。装载机在子路线上工作时我缺少什么。

根据一些基本测试，似乎为了让新的 RRDv6.4 数据 API 工作，您需要在createBrowserRouter功能。

There does然而似乎已经是issue https://github.com/remix-run/react-router/issues/9362提交给@remix-run/react-router将此行为视为已报告的错误，因此如果它已得到解决/解决，您可能需要关注它。 （我怀疑是你，因为名字是“geoffrey”，而且时间恰好是大约一个小时前，与这篇文章的时间差不多)

上述问题已被closed https://github.com/remix-run/react-router/issues/9362#issuecomment-1261060825附评论：

后裔<Routes>树不参与数据加载 （https://reactrouter.com/en/main/components/routes https://reactrouter.com/en/main/components/routes）因为他们不能 在渲染时间之前就知道。你需要举起你的后代route定义到您传递到的路由中createBrowserRouter.

有关下行路线和新数据 API 的相关信息可以在Routes https://reactrouter.com/en/main/components/routes注释中的文档。

Note:

如果您使用像这样的数据路由器createBrowserRouter这是 该组件不常见，因为它不参与数据 加载中。

将整个路由声明提升到创建数据路由器的父级。以下确实适用于加载器功能"/about"路线和About成分。

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="*"
      loader={({ params }) => {
        console.log("index loader log");

        return "This is the App";
      }}
      element={<App />}
    >
      <Route path="auth/*" element={<AuthLayout />} />
      <Route
        path="about"
        loader={({ params }) => {
          console.log("about child loader log");

          return "this is the about page";
        }}
        element={<AboutPage />}
      />
    </Route>
  )
);

The App组件应该渲染一个Outlet用于将其内容渲染到的嵌套路由。

import { Outlet } from 'react-router-dom';

const App = () => {
  return (
    <>
      <h1>Testing app</h1>
      <Outlet />
    </>
  );
};