如何将supertokens-auth-react与react-router-dom v6的createBrowserRouter集成

你目前使用SuperTokens配合BrowserRouter实现路由，但想要切换到React Router v6+的createBrowserRouter写法，以下是正确的集成方案：

原BrowserRouter实现代码 #

import React from 'react';
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from "supertokens-auth-react";
import * as reactRouterDom from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <SuperTokensWrapper>
                <BrowserRouter>
                    <Routes>
                        {/* 渲染登录UI到/auth路由 */}
                        {getSuperTokensRoutesForReactRouterDom(reactRouterDom)}
                        {/* 自定义业务路由 */}
                    </Routes>
                </BrowserRouter>
            </SuperTokensWrapper>
        );
    }
}

切换到createBrowserRouter的正确实现 #

核心要点 #

1. getSuperTokensRoutesForReactRouterDom必须传入reactRouterDom作为参数，它会返回适配React Router的路由配置数组
2. 在createBrowserRouter的路由列表中，用扩展运算符...展开SuperTokens生成的路由数组，避免嵌套问题
3. 必须用SuperTokensWrapper包裹RouterProvider，确保SuperTokens上下文覆盖整个路由树

完整代码示例 #

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import SuperTokens, { SuperTokensWrapper, getSuperTokensRoutesForReactRouterDom } from 'supertokens-auth-react';
import * as reactRouterDom from 'react-router-dom';
import Error from '../pages/Error';
import Root from '../pages/Root';
import { supertokensConfig } from '../supertokensConfig';

// 先初始化SuperTokens配置
SuperTokens.init(supertokensConfig);

// 创建路由配置
const router = createBrowserRouter([
  // 展开SuperTokens生成的Auth路由（默认挂载在/auth路径）
  ...getSuperTokensRoutesForReactRouterDom(reactRouterDom),
  // 自定义业务路由
  {
    path: '/',
    element: <Root />,
    errorElement: <Error />,
    // 可添加子路由
    // children: [...]
  }
]);

function App() {
  return (
    <SuperTokensWrapper>
      <RouterProvider router={router} />
    </SuperTokensWrapper>
  );
}

export default App;

关键说明 #

• SuperTokens生成的路由默认包含登录、注册、密码重置等Auth UI页面，路径可在supertokensConfig中修改
• 确保SuperTokens.init在创建路由前执行，保证配置生效
• 自定义路由与SuperTokens路由遵循React Router的默认匹配规则，可自由组合

内容的提问来源于stack exchange，提问作者Sergey Krutilin