在使用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>
);