React Suspense 未加载后的组件? [英] Components After React Suspense Not Loading?

问题描述

我不得不用 suspense 和 react.lazy 分解我的一些路由，以确保我的包文件不是荒谬的.但是这样做之后，我的第一个悬念支架之后的路线不再有效?

I had to break up some of my routes with suspense and react.lazy to ensure that my bundle file wasn't ridiculous. But after doing so, the routes after my first suspense bracket are no longer working?

在下面的示例中，链接 1 - 6 的路由工作正常(没有问题并且它们可以正常渲染).但是 Suspense 内部的组件和它之后的所有组件(Suspense 内部和外部)没有正确加载.你去那条路线，页面上没有加载任何东西.甚至 Spinner 组件也不会作为后备加载.我试过删除微调组件作为后备，只是做加载......即使它也不会出现在页面上.

In the following example, the routes for Links 1 - 6 are working properly (no issue and they render properly). But the components inside the Suspense and all the ones after it (inside and outside the suspense) aren't loading properly. You go to that route and nothing loads on the page. Even the Spinner component doesn't load as the fallback. I've tried removing the spinner component as the fallback and just doing Loading... and even that won't appear on the page.

我的导入语句:

import React, { Component } from 'react';
import { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

我的组件导入结构示例:

My component import structure example:

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 有关.我正在审查的文档和来源说这些路线可能在正常的路线树中，但事实并非如此.悬念必须在 react-router 的 Statement 之外.将每条路由都包裹在 switch 语句之外后，就可以正常工作了.

It had to do with my React-Router. The documentation and sources I was reviewing for it said that the routes could be in the normal route tree, turned out that wasn't the case. Suspense had to be outside the Statement for react-router. After wrapping every route outside the switch statement, it worked properly.

这篇关于React Suspense 未加载后的组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！