javascript - React Suspense 未加载后的组件?
问题描述
我不得不用悬念和 react.lazy 打破我的一些路线,以确保我的捆绑文件不荒谬。但是这样做之后,我的第一个悬念括号之后的路线不再起作用了?
在下面的示例中,链接 1 - 6 的路由正常工作(没有问题,并且它们正确呈现)。但是 Suspense 内部的组件和它之后的所有组件(悬念内部和外部)都没有正确加载。您转到该路线,页面上没有任何内容。甚至 Spinner 组件也不会作为后备加载。我已经尝试删除微调器组件作为后备组件,然后只是进行加载......即使这样也不会出现在页面上。
我的进口声明:
import React, { Component } from 'react';
import { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
我的组件导入结构示例:
import Comp1 from './components/Comp1';
import Comp2 from './components/Comp2';
import Comp3 from './components/Comp3';
import Comp4 from './components/Comp4';
import Comp5 from './components/Comp5';
import Comp6 from './components/Comp6';
import Comp9 from './components/Comp9';
const Comp7 = React.lazy(() => import('./components/Comp7'));
const Comp8 = React.lazy(() => import('./components/Comp8'));
const Comp10 = React.lazy(() => import('./components/Comp10'));
(我的路由树示例)
<Route exact path="/link-1" component={ Comp1 } />
<Route exact path="/link-2" component={ Comp2 } />
<Route exact path="/link-3" component={ Comp3 } />
<Route exact path="/link-4" component={ Comp4 } />
<Route exact path="/link-5" component={ Comp5 } />
<Route exact path="/link-6" component={ Comp6 } />
<Suspense fallback={<Spinner /> }>
<Route exact path="/link-7" component={ Comp7 } />
<Route exact path="/link-8" component={ Comp8 } />
</Suspense>
<Route exact path="/link-9" component={ Comp9 } />
<Suspense fallback={<Spinner /> }>
<Route exact path="/link-10" component={ Comp10 } />
</Suspense>
<Route exact path="/link-11" component={ Comp11 } />
编辑:展示我修复它的方式。
<Suspense fallback={<Spinner /> }>
<Route exact path="/link-1" component={ Comp1 } />
<Route exact path="/link-2" component={ Comp2 } />
<Route exact path="/link-3" component={ Comp3 } />
<Route exact path="/link-4" component={ Comp4 } />
<Route exact path="/link-5" component={ Comp5 } />
<Route exact path="/link-6" component={ Comp6 } />
<Route exact path="/link-7" component={ Comp7 } />
<Route exact path="/link-8" component={ Comp8 } />
<Route exact path="/link-9" component={ Comp9 } />
<Route exact path="/link-10" component={ Comp10 } />
</Suspense>
解决方案
它与我的 React-Router 有关。我正在查看的文档和消息来源说这些路由可能位于正常的路由树中,但事实并非如此。Suspense 必须在 react-router 的声明之外。在将每条路由包装在 switch 语句之外之后,它就可以正常工作了。
推荐阅读
- c# - 如何将值从一种方法传递到另一种方法?
- r - 根据循环多列的不同变量分数创建函数(方程)
- oop - 如何检查类是否基于其他抽象类
- flutter - LibraryVersion com.google.android.gms.common.internal.LibraryVersion.getInstance() 耗时 144.551ms
- c# - Mono 中的 ListView 闪烁并且不显示其 StateImageList 中的图像
- embedded - STM32 SPI 与 HAL 通信
- c - C中连接变量和常量之间的区别
- reactjs - 用于 BOT 的 React Web 聊天中的自动完成功能
- firebase - RealTimeDatabase.once() 重复运行
- python - 获取 df['num'] 和 df1['num'] 中存在的公共数据并合并两个数据帧中相同的数据