如何将 Auth0 提供程序与 v6.4 中新的 createBrowsereRouter 一起使用？

Question

我们正在迁移到 v6.4 并createRoutesFromElements按照文档的建议将我们的路由迁移到新createBrowserRouter路由器。

我们的设置看起来像这样

const router = createBrowserRouter(
  createRoutesFromElements(--> our routes go here <--)
);

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);

Auth0 文档说 Auth0 提供程序应该嵌套在提供程序下。新路由器如何做到这一点？

我们尝试将身份验证提供程序包装在路由周围，createRoutesFromElements但不起作用。也尝试这样做，但我们收到错误。

<RouterProvider router={router} >
    <Auth0Provider />
</RouterProvider>

有人可以帮我了解 Auth0 提供程序的放置位置吗？谢谢

Answer 1

似乎Auth0Provider只需要在路由器组件提供的路由上下文中呈现。它RouterProvider不会像那样接受儿童 JSX。Auth0Provider我建议在布局路由上渲染组件，作为“从元素创建路由”路由配置的一部分。作为布局路由Auth0Provider包装Outlet并将其身份验证上下文提供给其子 ReactTree 的所有嵌套路由。

例子：

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

const Auth0ProviderLayout = () => (
  <Auth0Provider>
    <Outlet />
  </Auth0Provider>
);

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route element={<Auth0ProviderLayout />}>
      ... other nested routes ...
    </Route>
  )
);

root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <RouterProvider router={router} />
    </ChakraProvider>
  </React.StrictMode>
);