加载ReactJS组件时出现延迟

Question

我正在使用React和React Router构建SPA(单页应用程序(。"雇员"；是标题中的导航菜单项之一。根据文档-基于路由的代码拆分，我试图让组件像这样延迟加载：

import React, { Component, lazy, Suspense } from 'react';
import './App.css';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
...
// import { Employees } from './components/Employees/Employees';
const Employees = lazy(() => import('./components/Employees/Employees'));
export default class App extends Component {
state = {
...
employeesData: [
...objects with data...
]
}
render() {
return (
<BrowserRouter>
<div className="App">
...
<Suspense fallback={<div>Loading...</div>}>
<Switch>

{/* other routes here */}

<Route path="/employees/" component={
() =>
<Employees
data={this.state.employeesData}
/>
} />
</Switch>
</Suspense>
...
</div>
</BrowserRouter>
);
}
}

Employees组件看起来像：

import React from 'react';
import './css/Employees.css';
export const Employees = (props) => {
const { data } = { ...props };
// sort elements by name value
data.sort(
(a,b) => (a.name > b.name) ? 1 : ((b.name > a.name) ? -1 : 0)
);
let items = [];    

for (let i = 0; i < data.length; i++) { 
items.push(
<div className="container">
<div className="imgbox">
<img className="image"
src={ data[i].image }
alt={ data[i].name }                        
/>                    
</div>
<div className="textbox">
<h4 className="name">
{ data[i].name }
</h4>
<p className="text">
{ data[i].title }
<br/>
{ data[i].text }
<br/>
{ data[i].workplace }                            
</p>
</div>
</div>
);
}
return (
<div className="Employees">
...
<div className="wrapper">
...
{ items }
</div>
</div>
)
};

问题是，当点击"；雇员"；导航项目，网页变为空白。我做错了什么？

警告：lazy:需要动态import((调用的结果。而是接收到：[对象模块]您的代码应该如下所示：const MyComponent=lazy(((=>导入('./MyComponent'((

Answer 1

据说它希望Employees组件是文件的默认导出。您必须将其更改为默认导出：https://reactjs.org/docs/code-splitting.html#named-出口

Answer 2

两件事。

1. 在这种情况下使用render道具而不是component(Router(
2. 只将Employees包裹在Suspense中，而不是整个Switch(在render道具内(