React Suspend 后的组件未加载?

2023-12-14

我必须用 suspense 和react.lazy 来分解我的一些路线,以确保我的捆绑文件不是荒谬的。但是这样做之后,我的第一个悬念括号之后的路线就不再起作用了?

在以下示例中,链接 1 - 6 的路由工作正常(没有问题并且可以正确渲染)。但是 Suspense 内部的组件及其之后的所有组件(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 有关。我正在审查的文档和来源说这些路由可能位于正常的路由树中,但事实证明并非如此。悬念必须在react-router 的声明之外。将每个路由包装在 switch 语句之外后,它就可以正常工作了。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Suspend 后的组件未加载? 的相关文章

  • 在 Node.js 中包含另一个文件中的 JavaScript 类定义

    我正在为 Node js 编写一个简单的服务器 并且使用我自己的类 名为User看起来像 function User socket this socket socket this nickname null just the typical
  • ES6 类文字中的 IIFE

    在 ES5 中我们都可以这样做 myClass prototype myMethod function return function 我可以对 ES6 类文字执行同样的操作吗 不 至少现在还没有 ES6 类仅支持声明方法 因此任何不直接为
  • 有没有办法将 Google 文档分割成多个 PDF?

    我想在 Google Scripts VBA 代码中复制我为 Word 文档编写的代码 基本上 它通过搜索我插入文档中的标签 将文档 切片 为多个 PDF 文件 目的是允许合唱团使用 forScore 管理乐谱的应用程序 在切片点插入先前注
  • 错误 TS2314:通用类型“Component”需要 2 个类型参数

    在将 ReactJS 与 TypeScript 一起使用时 会出现以下错误 error TS2314 Generic type Component
  • Javascript 制作音频 blob

    我正在测试 html 音频标签 我想制作音频 blob url 就像 youtube 或 vimeo 那样 并将其添加到 src 开始播放音频 我一直在测试new Blob and URL createObjectURL 但我不知道如何使用
  • 如何显示/隐藏jsf组件

    在我的一个 JSF 应用程序中 顶部的标题部分包含 selectOneMenu 底部的内容部分显示过滤器组件 默认情况下 应用程序首先在顶部显示 selectOneMenu 数据 在底部显示相应的 Filter 信息 如果用户选择不同的se
  • Chrome 跨域 PATCH 请求不起作用

    我有一个带有 REST Api 的网站 现在我正在创建一个浏览器扩展 它将从某些页面收集数据并将它们发送回 REST Api 因为我希望我的扩展能够与 Firefox 和 Chrome 兼容 并且易于维护 所以我将实际代码作为脚本标记注入到
  • 在Javascript中将RGB数组转换为RGBA数组的快速方法

    我正在使用的模拟器在内部存储 RGB 值的一维帧缓冲区 但是 HTML5 画布在调用 putImageData 时使用 RGBA 值 为了显示帧缓冲区 我当前循环遍历 RGB 数组并以某种方式创建一个新的 RGBA 数组与此类似 https
  • Webpack - 资产大小限制中的警告:以下资产超出了建议的大小限制 (244 KiB)

    当我在生产模式下运行 webpack 时 有资产规模限制 超出 的警告 我怎样才能运行而不出现这个错误 在我的项目中 我包含 css 并且我看到 webpack 构建中包含一些 node module 目录 但是如果我排除 css 的 no
  • UpdatePanel 启动脚本未执行

    我正在编写一个在 SharePoint 网站中使用的 ASP NET Web 部件 并尝试使用 UpdatePanel 来呈现查询结果 我想使用 JQuery 插件来修改从异步回发返回的表 但我无法让启动脚本在异步更新上执行 我发现这个帖子
  • 如何将OpenLayers多边形坐标转换为纬度和经度?

    我正在使用开放层 https openlayers org en latest examples draw freehand html绘制多边形并保存坐标的技术 这是我的代码 var raster new ol layer Tile sou
  • Google 地图 Javascript v3 折线点击事件

    我正在尝试显示一张地图 其中有多条路线布置为折线 单击多段线时 我想显示特定于该线的数据 将数据与线关联不是问题 但无论单击哪条线 显示的数据都会与最近绘制的线关联 就好像每条新折线都会覆盖最后一条线一样 我有一个数据库 其中包含 gpx
  • Flask 和 Reactjs 抛出 JSX 转换错误

    我已经开始将 ReactJS 与 Python Flask 后端结合使用 通过 Flask 渲染模板时 我在 Chrome 控制台中收到以下客户端错误 错误 找不到模块 jstransform visitors es6 templates
  • 带有桌子的嵌套表

    我在应用了表排序器的表中嵌套了表 它在嵌套表中添加了排序标题 但是它们没有对行进行排序 并且抛出了JavaScript错误 我想拥有 嵌套表不可排序 巢表上的排序实际上可以工作 但不是现状 您的第一个选择要容易得多 使嵌套表不可排序 像这样
  • 为什么我从 c# 到 js 得到不同的 MD5 哈希值?

    我有一个用于加密密码的 C 函数 System Security Cryptography MD5CryptoServiceProvider md5Provider new System Security Cryptography MD5C
  • 如何使用 API 中的数据填充选择的下拉元素 - ReactJS

    我对 React 还很陌生 我正在从 API 获取数据 当我检查控制台日志时可以看到数据 但是我不知道如何使用 map 创建一个新数组 然后选项元素可以使用该数组来显示货币代码 目前它填充下拉列表 但选项元素全部为空 结果显示为 NaN 下
  • redux - 如何存储和更新键/值对

    我正在使用 redux 和 React js 我想存储简单的键 值对 但无法获得正确的减速器语法 在这种情况下 每个键 值对将保持与外部系统的连接 这是正确的做法吗 我刚开始使用 redux 所以这有点神秘 export default s
  • 除非打开开发人员工具,否则 IE8 Javascript 无法运行?

    由于某种原因 在 IE8 中 除非我在打开开发工具的情况下重新加载页面 否则 javascript 不会运行 我关闭开发人员工具并重新加载页面 然后 javascript 停止工作 我没有收到任何错误报告 无论如何它们也没有任何用处 还有其
  • 禁用移动设备上的锚点菜单点击

    我使用嵌套列表作为带有子菜单项的菜单 我曾经这样做过 如果您将鼠标悬停在主菜单项上 子菜单项将通过将显示从无更改为块来出现 我决定让子菜单看起来就像是下拉的 并使用了 CSS 过渡 我遇到的问题是 在第一种方法中 如果您触摸 iPad 上的
  • 尽管 getBoundingClientRect() 是假的,但如何将事件坐标转换为 SVG 坐标?

    我正在尝试根据鼠标的位置在 SVG 元素上动态绘制内容 不幸的是 我很难将 mousemove 事件中的鼠标坐标转换为 SVG 元素的坐标空间 这是我一直在测试的一个有缺陷的函数 CylinderDemo prototype handleM

随机推荐