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

发布于10月04日

我们正在迁移到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提供程序应该嵌套在提供程序下.如何使用新路由来实现这一点？

我们try 在createRoutesFromElements路由中包装身份验证提供程序，但不起作用.我也try 过这样做，但我们收到了错误.

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

有没有人能帮我了解一下在哪里放置Auth0提供程序？谢谢你，????

推荐答案

似乎只需要在路由组件提供的路由上下文中呈现Auth0Provider.RouterProvider不会像那样带子元素go JSX.我建议将Auth0Provider组件呈现在Layout Route上，作为"从元素创建路由"路由配置的一部分.作为布局，路由Auth0Provider包装AN Outlet并将其认证上下文提供给其子react 树的所有嵌套路由.

示例:

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>
);