ソースに react-lazy を採用しようとしています。でも何がいけないのかわからない..
2つのことを確認しました。
- homeContainer コンポーネントのエクスポート方法を確認してください。デフォルトのエクスポートなので、遅延コンポーネントの使用には影響しません(デフォルトのHomeContainerをエクスポート)
- Home Component のコンソールをやった.. $$typeof: Symbol(react.lazy), _init, payload だ..いいのかわからない.. 大丈夫?
アプリを実行すると、3 つのエラーが発生しました...しかし、何が問題なのかわかりません...
- キャッチされていない未定義の readLazyComponentType
- (インデックス):22 Uncaught TypeError: index.22 で未定義のプロパティ 'includes' を読み取ることができません
- 上記のエラーは、React コンポーネントの 1 つで発生しました: in Unknown (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;