React Suspense 未加载后的组件？

Question

我不得不打破我的一些路线，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>

Answer 1

这与我的 React-Router 有关。我正在审查的文档和来源说路由可能在正常的路由树中，但事实并非如此。悬念必须在 React-router 的 Statement 之外。在 switch 语句外包装每条路由后，它工作正常。

React Suspense 未加载后的组件？

Components After React Suspense Not Loading?

javascript

reactjs

react-router

react-suspense

react-lazy-load