问题描述
我正在尝试为我的 reactjs 应用程序添加一个悬念,但出现此错误。不太确定我做错了什么。它看起来像我以前使用过的 Suspense,但这次它出错了。我不确定它是否与 index.js 文件有关,但如果需要回答问题,我会很高兴地发布
const Projects = lazy(() => import('./pages/Projects/Projects'));
import Loader from "./components/UI/Loader/Loader";
const App = ({ loggedIn,emailVerified }) => {
let routes;
if (loggedIn && !emailVerified) {
routes = (
<Layout>
<Switch>
<Route exact path="/verify-email" component={VerifyEmail} />
<Route path="/logout" component={logout} />
<Redirect to="/verify-email" />
</Switch>
</Layout>
);
} else if (loggedIn && emailVerified) {
routes = (
<Layout>
<Switch>
<Suspense fallback={<Loader />}>
<Route exact path="/" component={Projects} />
<Route exact path ="/verify-email"
render={() =>
emailVerified ? <Redirect to="/" /> : <Profile />
}
/>
<Route path="/profile" component={Profile} />
<Route path="/logout" component={logout} />
<Route path="/:id" component={TodosLayout} />
<Redirect to="/" />
</Suspense>
</Switch>
</Layout>
);
} else {
routes = (
<Switch>
Other routes I removed for length
</Switch>
);
}
return <Fragment>{routes}</Fragment>;
};```
解决方法
必须在底部导入延迟模块。
例如:
import { useState,useEffect } from "react";
// import anything else here like:
import Loader from "./components/UI/Loader/Loader";
// import lazy modules at the very bottom
const Projects = lazy(() => import('./pages/Projects/Projects'));
const App = () => {
return <h3>App Is Working</h3>
}
export default App;