Невозможно найти узел в размонтированном компоненте во время разделения кода с помощью React.lazy и Suspense.

Question

Я добавил разделение кода с помощью 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 и lazy options.Есть идеи о том, почему я это получаю?

Answer 1

Обычно ошибка относится к прослушивателям событий , которые привязаны к узлам, не удаленным на componentWillUnmount . Проверьте ваши компоненты, чтобы узнать, в этом ли проблема.