javascript - 使用 acl 创建反应应用程序，得到 casl react t.on 错误

Question

我刚刚开始使用 casl，似乎我必须遗漏一些东西。我创建了一个名为的文件can.js，它与文档中的示例完全相同：

import { createContext } from 'react';
import { createContextualCan } from '@casl/react';

export const AbilityContext = createContext();
export const Can = createContextualCan(AbilityContext.Consumer);

在我App.tsx使用

let caslAbilities = new Ability(abilitiesJson); // from an API call returning json formatted abilities as described in docs
<AbilityContext.Provider value={caslAbilities}> 
   <Main />
</AbilityContext.Provider> 

然后在里面Main.ts我定义了一些这样的路线：

import {Can} from "../Auth/can"; // the file defined above
<Can I={"read"} a={"Post"}> // this should always be false with my test abilities json
    <Route path="/reporting">
        <ReportingHome />
    </Route>
</Can>

当您单击受限路线时，应用程序会引发错误：

Uncaught TypeError: t.on is not a function

我错过了一些明显的东西吗？