如何在react+react router dom中使用createBrowserRouter？

Question

在我的应用程序中，我使用

BrowserRouter

组件来渲染我的路线或组件。但我想使用 loader 功能。但我目前的方法无法使用该功能。

 <BrowserRouter>
      <AppRoutes />
    </BrowserRouter>

按照下面的链接建议，我需要使用

createBrowserRouter

函数。 为什么 React js 中没有调用 loader 函数？ https://reactrouter.com/en/main/routers/picking-a-router

当前路由方式。

export default function AppRoutes() {
  return (
    <Layout>
      <Routes>
        <Route element={<RequireAuth />}>
          <Route
            path={'/'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<Booking />}
              />
            }
          ></Route>
        </Route>
        <Route element={<RequireAuth />}>
          <Route
            path={'/app'}
            element={
              <React.Suspense
                fallback={<div>loading</div>}
                children={<App />}
              />
            }
          ></Route>
        </Route>
      </Routes>
    </Layout>
  );
}

现在我正在尝试使用 createBrowserRouter 重构我的路由。我尝试了这样的

const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
  {
    path: '/app',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
]);

如何渲染组件（预订和应用程序组件）。如何在 createBrowserRouter 方法中渲染子组件任何想法??

这是我的代码 https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx,src%2Findex.css,src%2Froutes.tsx,src%2Flayout.tsx,src %2FRequireAuth.tsx,src%2Fbrowser-routes.tsx&terminal=dev

Answer 1

要将子项渲染到任何路径，您可以执行以下操作：使用 Booking 应用程序作为示例子项

const router = createBrowserRouter([
  {
    path: '/',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
    children: [
      {
        path: '/Booking',
        element: <Booking />,
      }
    ]
  },
  {
    path: '/app',
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <RequireAuth />,
  },
]);

您可以在此处的文档中找到非常说明性的示例https://reactrouter.com/en/main/start/tutorial