为什么我在 okta-react 安全组件上收到此错误？

问题描述

我正在尝试将 Okta 实施到我正在处理的项目中，并按照此处发布的说明 https://www.npmjs.com/package/@okta/okta-react，我在项目的路由器中添加了以下内容，

import React from 'react';
import HelloWorld from '@root/components/HelloWorld';
import { browserRouter,Route,Switch } from 'react-router-dom';
import { SecureRoute,Security,LoginCallback } from '@okta/okta-react';
import { OktaAuth } from '@okta/okta-auth-js';

const TestPage = () => {
    return (
        <div>
            <h1>This is my test page!!!</h1>
        </div>
    )
}

const Protected = () => {
    return (
        <div>
            <h1>Protected page</h1>
        </div>
    )
}

const oktaDomain = // Added my okta domain here
const clientId = // Added my client id here
const oktaAuth = new OktaAuth(
    {
        issuer: `https://${oktaDomain}.com/oauth2/default`,clientId: `${clientId}`,redirectUri: window.location.origin + '/login/callback'
    }
)


const AppRouter = () => {
    return (
        <browserRouter>
            <Security
                oktaAuth={oktaAuth}
            >
                <Route path="/" component={HelloWorld} exact={true} />
                <Route path="/test" component={TestPage} exact={true} />
                <SecureRoute path='/protected' component={Protected} />
                <Route path='/login/callback' component={LoginCallback} />
            </Security>
        </browserRouter>
    )
};

export default AppRouter;

这就是我的 AppRouter.tsx 的样子，

如果我删除这个安全组件层，我可以看到没有任何错误的应用程序，但是如果我像示例所示那样添加安全性，我会收到以下错误，

未捕获的类型错误：Object(...) 不是函数 在安全 (Security.tsx:38)

如果我点击查看失败的行，我会看到：

我在这里错过了什么？

提前谢谢你)

解决方法

我遇到了同样的问题。以下是对我有用的方法：

更新包： react-router-dom 到 5.2.0 版

如果您使用的是 Redux， 尝试将 react-redux 的版本更新到版本 6.x.x

如果问题仍然存在， 使用 connected-react-router 而不是 react-router-redux。 以下是从 react-router-redux 迁移到 connected-react-router 的步骤： https://github.com/supasate/connected-react-router/issues/74