reactjs - 使用 React.lazy 的静态路由

Question

在使用 React.lazy 时尝试延迟加载静态路由时，我收到以下错误消息。我不知道从这里去哪里？

未捕获的错误：无法在未安装的组件上找到节点。

我猜当我单击它尚未安装的路径时？

这是定义路线的地方。作为测试，我只是加载应用程序最重的部分。我正在使用最新版本的 React 和 React Router-dom。

const AddressValidator = lazy(() => import('views/AddressValidator/ValidationForm'));
const Landing = lazy(() => import('../views/Dashboard/Landing'));

/**
 * Contains routes that will be displayed on the navigation bars
 */
const routes = [
  {
    path: '/dashboard',
    sidebarName: 'Dashboard',
    navbarName: 'Dashboard',
    component: Landing,
    icon: Dashboard,
  },
  {
    path: '/email',
    sidebarName: 'Email Templates',
    navbarName: 'Email Template Manager',
    component: EmailListPage,
    icon: Email,
    subRoutes: false,
  },
  {
    path: '/email/edit',
    navbarName: 'Email Details',
    sidebarName: 'Edit',
    component: EmailDetailsPage,
    hidden: true,
  },
  {
    path: '/address',
    sidebarName: 'Address Validation',
    navbarName: 'Address Validation',
    component: AddressValidator,
    icon: Shipping,
  },
  {
    path: '/mta',
    sidebarName: 'MyTech Assistant',
    navbarName: 'MyTech Assistant',
    icon: Book,
    subRoutes: mtaRoutes,
    showLanding: false,
  },
  {
    path: '/lmi',
    sidebarName: 'Log Me In',
    navbarName: 'LMI Agent Account Creation',
    component: UserCreator,
    icon: VerifiedUser,
  },
  {
    path: '/user_management',
    sidebarName: 'User Management',
    navbarName: 'User Management',
    component: UserManagement,
    icon: People,
  },
  {
    path: '/user_restriction',
    sidebarName: 'User Restriction',
    navbarName: 'User Restriction',
    component: UserRestriction,
    icon: Lock,
  },
  {
    path: '/mobile_catalog',
    sidebarName: 'Mobile  Catalog',
    navbarName: 'Mobile  Catalog',
    component: MobileCatalogExplorer,
    icon: '',

  },

];

这是 app.js

const hist = createBrowserHistory();

const App = () => (
  <Provider store={createStore(reducers)}>
    <MsalAuthProvider>
      <ModalRoot />
      <AlertRoot />
      <Suspense fallback={<div>Loading...</div>}>
        <Router history={hist}>
          <Switch>
            { indexRoutes.map((prop, key) => <ProtectedRoute path={prop.path} component={prop.component} key={key} />)}
          </Switch>
        </Router>
      </Suspense>
    </MsalAuthProvider>
  </Provider>
);

标签： reactjsreact-router-v4