如何将 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。我建议在

Layout Route

上渲染 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>
);

Answer 2

只想添加，如果您有声明性路由对象，则可以将 Auth0Provider 添加到路由元素。

export const router = createBrowserRouter([
  {
    path: '/',
    element: <Auth0ProviderLayout />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: 'styleguide',
        element: <StyleGuide />,
      },
      {
        path: 'dashboard',
        element: <Dashboard />,
      },
      {
        path: 'companies',
        children: [
          {
            path: '',
            element: <Navigate replace to="/companies/explore" />,
          },
          {
            path: 'explore/',
            element: <Companies />,
            loader: companiesLoader,
          },
          {
            path: 'filter/:filterAttribute/by/:filterValue',
            element: <CompaniesFiltered />,
            loader: filteredCompaniesLoader,
          },
          {
            path: 'favorites',
            element: <CompaniesFavorites />,
            loader: myCompaniesLoader,
          },
          {
            path: ':companyID',
            loader: companyLoader,
            element: <SingleCompany />,
          },
        ],
      },
      {
        path: 'jobs',
        element: <Jobs />,
      },
      {
        path: 'contacts',
        element: <Contacts />,
      },
    ],
  },
]);

Answer 3

德鲁的例子效果很好，谢谢。我做了一个改进，以便与 React Query + RR 加载器配合良好：

const AppEntryPoint = () => {
  const router = useMemo(
    () =>
      createBrowserRouter(
        createRoutesFromElements(
          <Route element={<Auth0ProviderWithRedirect />}>
            <Route path="/" element={<App />}>
              <Route
                path="/router-1"
                element={<Router01 />}
                loader={Router01Loader}
                errorElement={<ErrorPage />}
              />
              <Route path="/router-1/:id" element={<Router01Details />} />
              <Route path="/login" element={<AuthPage />} />,
            </Route>
          </Route>,
        ),
      ),
    [],
  );
  return (
    <StrictMode>
      <AppProviders>
        <RouterProvider router={router} />
      </AppProviders>
    </StrictMode>
  );
};