如何在React Router v6中使用Asgardeo的SecureRoute组件？

React Router v6对路由结构做了严格限制，<Routes>的直接子节点必须是<Route>或<React.Fragment>，这就是你遇到[Wi] is not a <Route> component错误的原因——旧版的<SecureRoute>写法不符合v6的要求。

针对React Router v6，Asgardeo React SDK v2.x已经适配了新的用法，有两种常用实现方式：

方式一：将SecureRoute作为Route的element内容包裹组件 #

修改路由代码，把<SecureRoute>放到<Route>的element属性中，作为页面组件的包裹层：

import { SecureRoute } from "@asgardeo/auth-react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// ...

<BrowserRouter>
    <Routes>
        <Route path="/" element={<LandingPage />}/>
        <Route 
            path="/home" 
            element={
                <SecureRoute callback={() => signIn()}>
                    <HomePage />
                </SecureRoute>
            }
        />
    </Routes>
</BrowserRouter>

方式二：使用withSecureRouter高阶组件包装页面组件 #

先通过高阶组件把需要保护的页面组件转换成受保护版本，再在路由中直接使用：

import { withSecureRouter } from "@asgardeo/auth-react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// 用高阶组件包装HomePage并配置登录回调
const ProtectedHomePage = withSecureRouter(HomePage, {
    callback: () => signIn()
});

// ...

<BrowserRouter>
    <Routes>
        <Route path="/" element={<LandingPage />}/>
        <Route path="/home" element={<ProtectedHomePage />}/>
    </Routes>
</BrowserRouter>

两种方式都能实现路由保护效果：未登录用户访问/home时，会触发signIn()回调跳转到登录流程。

内容的提问来源于stack exchange，提问作者Mohamed Ishad