5

我试图在我的源代码中采用 react-lazy。但是不知道怎么回事。。

我检查了两件事。

  1. 检查 homeContainer 组件的导出方式。它是默认导出所以它不会影响使用惰性组件（导出默认 HomeContainer）
  2. 我做了 Home Component 的控制台。它是 $$typeof: Symbol(react.lazy), _init, payload...我不知道是对的.. 可以吗？

当我执行我的应用程序时，出现三个错误......但我找不到问题所在......

  1. 未捕获的未定义 readLazyComponentType
  2. (index):22 Uncaught TypeError: Cannot read property 'includes' of undefined at index.22
  3. 上述错误发生在您的一个 React 组件中：在 Unknown (created by Context.Consumer)

在 App.tsx 中，我声明了基于 Route 的组件。我的模块版本是 react: 16.9.16, react-dom: 16.9.4


import React, {lazy, Suspense} from "react";
import {BrowserRouter,  Switch,  Route} from "react-router-dom";

const Home = lazy(() => import("./routes/Home/HomeContainer"));
console.log(Home)

.....

return (
<BaseLayout>
<Suspense fallback={<SpinContainer />}/>
 <Switch>
  <Route exact path={PATH.ROOT} component={Home}/>
   ... Other Routes ...
 </Switch>
</Suspense>
</BaseLayout>

...
...
)

const App: React.FC = () => {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <RoutedComponent />
      </BrowserRouter>
    </ErrorBoundary>
  );
};

export default App;
4

0 回答 0