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

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

然而，does似乎已经将此行为的issue和@remix-run/react-router作为报告的错误进行了归档，因此，如果它曾经被解决/解决，您可能想要遵循它.(I suspect it was you since the name is "geoffrey" and the timing is coincidentally about an hour ago around the same time as this post)

自那以后，上面的问题已经closed了，并有 comments :

子体<Routes>树不参与数据加载 (https://reactrouter.com/en/main/components/routes)因为他们不能 在渲染时间之前就知道了.你需要把你的后代举起 route个定义进入你传递给createBrowserRouter的路由.

关于后代路由和新的数据API的相关信息可在Routes份文件的说明中找到.

注:

如果您使用的是像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，以将其内容呈现到其中.

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

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