我已经使用 React.lazy 和 Suspense 添加了代码拆分，并在添加它们之后按预期呈现组件但是当我从一个组件导航到另一个组件时会引发错误
无法在未安装的组件上找到节点。
import React, { Component, Suspense, lazy } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import { Provider } from 'react-redux'
import createStore from './store'
import Loading from './components/loading'
const NavigationBar = lazy(() => import('./containers/NavigationBar'))
const AdminContainer = lazy(() => import('./containers/Admin'))
const OrgSelection = lazy(() => import('./containers/OrgSelection'))
const TemplateLibrary = lazy(() => import('./containers/TemplateLibrary'))
const SearchContainer = lazy(() => import('./containers/SearchContainer'))
const Login = lazy(() => import('./containers/Login'))
const Processes = lazy(() => import('./containers/Processes'))
const CompanyDashboard = lazy(() => import('./containers/CompanyDashboard'))
const ProcessDashboard = lazy(() => import('./containers/ProcessDashboard'))
const GlobalTemplateLibrary = lazy(() =>
import('./containers/GlobalTemplateLibrary')
)
const ConcentContainer = lazy(() => import('./containers/Concent'))
const ChecklistDetails = lazy(() => import('./containers/ChecklistDetails'))
const PrivacyPolicy = lazy(() => import('./containers/PrivacyPolicy'))
const TemplateDashboard = lazy(() => import('./containers/TemplateDashboard'))
const TemplateCreation = lazy(() => import('./containers/TemplateCreation'))
const ProcessCreation = lazy(() => import('./containers/ProcessCreation'))
const ProcessRoleCreation = lazy(() =>
import('./containers/ProcessRoleCreation')
)
const Checklist = lazy(() => import('./containers/Checklist'))
const Test = lazy(() => import('./containers/Test'))
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<Suspense fallback={<Loading />}>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/organizations" component={OrgSelection} />
<NavigationBar>
<Route exact path="/admin" component={AdminContainer} />
<Route exact path="/process" component={Processes} />
<Route exact path="/templates" component={TemplateLibrary} />
<Route exact path="/search" component={SearchContainer} />
<Route exact path="/library" component={GlobalTemplateLibrary} />
<Route exact path="/privacypolicy" component={PrivacyPolicy} />
<Route exact path="/concent" component={ConcentContainer} />
<Route exact path="/checklist" component={Checklist} />
<Route exact path="/test" component={Test} />
<Route exact path="/checklist/:id" component={Checklist} />
<Route
exact
path="/checklist/details/:id"
component={ChecklistDetails}
/>
<Route
exact
path="/processDashboard"
component={ProcessDashboard}
/>
<Route
exact
path="/companyDashboard"
component={CompanyDashboard}
/>
<Route
exact
path="/templateDashboard"
component={TemplateDashboard}
/>
<Route exact path="/createProcess" component={ProcessCreation} />
<Route exact path="/viewsRoles" component={ProcessRoleCreation} />
<Route exact path="/template" component={TemplateCreation} />
</NavigationBar>
</Switch>
</Suspense>
</Router>
</Provider>
)
}
}
export default App
当我删除代码 Suspense 和惰性选项时，错误消失了。关于我为什么得到这个的任何想法？