Javascript 反应后的组件悬念未加载?

Javascript 反应后的组件悬念未加载?,javascript,reactjs,react-router,react-suspense,react-lazy-load,Javascript,Reactjs,React Router,React Suspense,React Lazy Load,我不得不用悬念和反应打破我的一些路线。懒惰,以确保我的捆绑文件不是荒谬的。但这样做之后,我的第一个悬念支架之后的路线就不再有效了 在下面的示例中,链接1-6的路由工作正常(没有问题,它们渲染正常)。但是悬念内部和之后的所有组件(悬念内部和外部)没有正确加载。你走那条路线,页面上什么也没有加载。即使微调器组件也不会作为后备加载。我已经试着删除微调器组件作为后备,只是做加载。。。即使这样也不会出现在页面上 我的进口声明: import React, { Component } from 'react

我不得不用悬念和反应打破我的一些路线。懒惰,以确保我的捆绑文件不是荒谬的。但这样做之后,我的第一个悬念支架之后的路线就不再有效了

在下面的示例中,链接1-6的路由工作正常(没有问题,它们渲染正常)。但是悬念内部和之后的所有组件(悬念内部和外部)没有正确加载。你走那条路线,页面上什么也没有加载。即使微调器组件也不会作为后备加载。我已经试着删除微调器组件作为后备,只是做加载。。。即使这样也不会出现在页面上

我的进口声明:

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'));
(我的路线树示例)


编辑:展示我修复它的方式

<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路由器有关。我审查的文档和资料来源说,路线可以在正常的路线树中,但事实并非如此。对于react router,悬念必须在声明之外。在switch语句之外包装每个路由后,它工作正常。

您好,您能提供更多关于如何修复它的信息吗?我想我也面临同样的问题,谢谢!抱歉,我现在才看到这个。我发现我必须在整个路线之外。我已经更新了原来的问题,以展示我所做的,使它工作。
<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>