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

Question

我正在使用 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 。装载机在子路线上工作时我缺少什么。

Answer 1

根据一些基本测试，似乎为了让新的 RRDv6.4 数据 API 工作，您需要在函数中指定完整的路由配置createBrowserRouter。

然而，似乎已经有一个针对此行为的问题作为报告的错误提交@remix-run/react-router，因此如果它得到解决/解决，您可能需要关注它。（我怀疑是你，因为名字是“geoffrey”，而且时间恰好是大约一个小时前，与这篇文章的同一时间）

上述问题已通过评论关闭：

后代<Routes>树不参与数据加载（https://reactrouter.com/en/main/components/routes），因为它们无法在渲染时间之前知道。您需要将您的后代 route定义提升到您传递给的路由中createBrowserRouter。

Routes有关下行路线和新数据 API 的相关信息可以在文档中的注释中找到。

笔记：

如果您使用数据路由器，则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>
  )
);

该App组件应该Outlet为嵌套路由渲染一个 an 来将其内容渲染到其中。

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

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