如何修复未捕获的 DOMException:无法在“历史记录”上执行“pushState”

2024-03-15

我有这个小应用程序,可以在 webpack-dev-server 的开发模式下正常工作,但是当我使用生产模式生成的 dist 文件夹中的捆绑文件时,我在浏览器中得到的只是以下错误:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/' cannot be created in a document with origin 'null' and URL 'file:///C:/Users/cristi/work/react_test_ground/dist/index.html'.

我该如何解决这个pushState问题?

最初我尝试用 React.lazy 和 Suspense 拆分代码,因为 webpack 抛出了这个错误:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  2c7b7b6becb423b8f2ae.bundle.js (413 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  main (413 KiB)
      2c7b7b6becb423b8f2ae.bundle.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of
your application.

但问题仍然存在。

您可以在此处查看代码和完整存储库:https://github.com/cristiAndreiTarasi/temporary https://github.com/cristiAndreiTarasi/temporary

App.js

import React, { Fragment, Suspense, lazy } from 'react';
import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';

const Home = lazy(() => import('./Home'));
const Blog = lazy(() => import('./Blog'));
const Contact = lazy(() => import('./Contact'));

export default () => (
    <BrowserRouter>
        <div>
            <ul>
                <li><Link to='/'>Home</Link></li>
                <li><Link to='/blog'>Blog</Link></li>
                <li><Link to='/contact'>Contact</Link></li>
            </ul>

            <Suspense fallback={<p>Loading...</p>}>
                <Switch>
                    <Route exact path='/' component={Home} />
                    <Route path='/blog' component={Blog} />
                    <Route path='/contact' component={Contact} />
                </Switch>
            </Suspense>
        </div>
    </BrowserRouter>   
);

其他组件的格式是这样的:

import React from 'react';

export default () => (
    <div>
        <h1>Hello from the Blog</h1>
        <img src='../images/landscape-art_large.jpg' />
    </div>
);

我希望从生产模式生成的捆绑文件中获得与开发模式相同的结果。


您应该通过网络服务器打开您的文件。因为您无法更改 file:// api 上的位置历史记录。

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

如何修复未捕获的 DOMException:无法在“历史记录”上执行“pushState” 的相关文章

随机推荐

  • Java 中的内存 OLAP 引擎 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 是否有内存中 OLAP 切片和切块数据 Java 库 相当于 Microsoft 分析服务 特别想听听
  • 修复了页眉与页内锚点重叠的问题

    如果我在 HTML 页面中有一个非滚动标题 固定在顶部 具有定义的高度 有没有办法使用 URL 锚点 fragment部分 让浏览器滚动到页面中的某个点 但仍然尊重固定元素的高度无需 JavaScript 的帮助 http example
  • 无法在 yum 上下载 caddy 包

    我在 Amazon Linux 上使用 AWS EC2 当我尝试下载 caddy yum install caddy 时 出现以下错误 如屏幕截图所示 编辑 2022 年 11 月 19 日 A H 的回答 https stackoverf
  • 找不到所需的文件index.html - Heroku 推送错误

    我正在使用 Heroku CLI 将 React Node 应用程序推送到 Heroku 构建失败 错误为找不到所需的文件index html 我已经检查了所有文件和一切就位 不知道我错过了什么 我被困在这里一星期了 请帮我 我正在使用 H
  • 如何在搜索之前编辑 jQuery 自动完成的输入?

    我有一个自动完成框 出于本示例的目的 因为它是一个简单的示例 返回一个包含社会安全号码的列表 为了便于阅读 它们中有破折号 我想修改自动完成功能 以便如果我输入 123456789 或 123 45 6789 它将在自动完成功能中找到相同的
  • Eiffel 中的不可变类

    我正在尝试做一个不可变的POINT在埃菲尔铁塔上课 下面的代码定义了一个吗 这 NONE 的可访问性x and y田地就够了吗 我可以给类不变量写一些东西吗x x 或者我还能如何实现不变性 class POINT create make f
  • 如何在SQLAlchemy中获取游标

    我是 Python Flask 的新手 在我的项目中 我们使用以下代码创建数据库对象 app Flask name app config SQLALCHEMY DATABASE URI sqlite tmp test db db SQLAl
  • 找不到 jQuery 选择器时会发生什么?

    如果我通过了一项selector as a parameter到一个函数 selector is an object function selector selector trigger eventHere 显然 event如果select
  • 从套接字读取二进制数据

    我正在尝试连接到服务器 然后向其发送 HTTP 请求 在本例中为 GET 这个想法是请求一个文件 然后从服务器接收它 它应该适用于文本文件和二进制文件 例如 imgs 我对文本文件没有问题 它工作得很好 但我对二进制文件有一些麻烦 首先 我
  • 枚举捕获 ALSA 设备并从中捕获

    我正在编写一个 C 程序 我想枚举系统中的所有捕获设备 实际上 我知道我有三个网络摄像头加上 集成 麦克风 识别它们并同时开始捕获它们 我使用 snd device name hint 枚举所有 PCM 设备 然后使用 snd device
  • Elasticsearch 按日期排序不正确

    在Elasticsearch文档中 有一个字段createdAt定义如下 createdAt type date format YYYY MM DD HH mm ss 当尝试按日期对记录进行排序时 我得到以下顺序 2019 10 01 07
  • 从迭代器返回对象的引用

    我想从向量返回对象的引用 并且该对象位于迭代器对象中 我怎样才能做到这一点 我尝试了以下方法 Customer CustomerDB getCustomerById const string id vector
  • 如何在 Node JS 中从目录中读取文件列表(按修改日期排序)

    需要从特定目录中读取文件列表 其中日期按降序或升序修改Node js 我已经尝试过下面的代码但无法得到解决方案 fs readdir path function err files if err throw err else var res
  • 如何通过php从外部网页获取内容?

    我想获取网页中的 标题 描述和关键字 我知道实现这项工作的 3 种方法 a 使用CURL b 使用 fopen c 使用 get meta data 奇怪的是 上述每一项都不能每次都正常工作 对于相同的网址 有时 我可以获得内容 有时 它会
  • 当焦点被移除时,XNA 运行缓慢

    我只是想知道 在制作游戏时 我注意到当我的游戏具有焦点时 就像它应该的那样 IsRunningSlowly 的 GameTime 值返回 false 但是当我更改应用程序时 它会更改为 true 我什至制作了一个空游戏 即使它失去焦点 Is
  • Android GPS 路由系统

    我正在开发一个 Android 应用程序 它可以定位用户 假设用户在路上 并且该应用程序将为用户创建最短路线 以便能够到达用户选择的目的地 定位用户不是问题 因为这里有一个 API http www vogella com articles
  • JavaEE真的可移植吗?

    我正在实施面试时分配给我的 JavaEE 作业 我以前对 EJB 有一些经验 但与 JMS 和 MDB 没有任何关系 以下是我通过大量示例发现的内容 应用程序服务器将其主题和队列绑定到不同的 JNDI 名称 例如topic queue jm
  • 查找并替换为唯一值

    我正在对换行符执行查找和替换 10 并使用以下代码将其替换为段落结束和段落开始标记
  • SOAP Web 服务和 RESTFUL Web 服务之间的区别

    我是 Java 新手 我知道有两种类型的 Web 服务 SOAP 网络服务 RESTful Web 服务 谁能告诉我两者之间的基本区别是什么 以及在哪种情况下SOAP Webservice是在什么情况下创建的RESTful Webservi
  • 如何修复未捕获的 DOMException:无法在“历史记录”上执行“pushState”

    我有这个小应用程序 可以在 webpack dev server 的开发模式下正常工作 但是当我使用生产模式生成的 dist 文件夹中的捆绑文件时 我在浏览器中得到的只是以下错误 Uncaught DOMException Failed t