如何修复未捕获的 DOMException:无法在“历史记录"上执行“pushState" [英] How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'
问题描述
我有这个小应用程序，它在 webpack-dev-server 的开发模式下运行良好，但是当我使用生产模式生成的 dist 文件夹中的捆绑文件时，我在浏览器中得到的只是这个错误:
未捕获的 DOMException:无法在History"上执行pushState":无法在来源为null"和 URL 的文档中创建 URL 为file:///C:/"的历史状态对象file:///C:/Users/cristi/work/react_test_ground/dist/index.html'.我该如何解决这个 pushState 问题?
最初我尝试用 React.lazy 和 Suspense 拆分代码，因为 webpack 抛出了这个错误:
警告资产大小限制:以下资产超出了建议的大小限制 (244 KiB).这会影响 Web 性能.资产:2c7b7b6becb423b8f2ae.bundle.js (413 KiB)入口点大小限制警告:以下入口点组合资产大小超过了建议的限制 (244 KiB).这会影响 Web 性能.入口点:主要 (413 KiB)2c7b7b6becb423b8f2ae.bundle.jswebpack 性能建议中的警告:您可以通过使用 import() 或 require.ensure 来延迟加载包的某些部分来限制包的大小你的申请.但问题依然存在.
您可以在此处查看代码和完整存储库:https://github.com/cristiAndreiTarasi/temporary
App.js
import React, { Fragment, Suspense, lazy } from 'react';从'react-router-dom'导入{ BrowserRouter, Route, Link, Switch };const Home = lazy(() => import('./Home'));const Blog = lazy(() => import('./Blog'));const Contact = lazy(() => import('./Contact'));导出默认值 () =>(<浏览器路由器><div><ul><li><Link to='/'>主页</Link></li><li><Link to='/blog'>博客</Link></li><li><Link to='/contact'>联系方式</Link></li><Suspense fallback={<p>加载中...</p>}><开关><路由精确路径='/' component={Home}/><Route path='/blog' component={Blog}/><Route path='/contact' component={Contact}/></开关></悬念></BrowserRouter>);
其他组件的格式是这样的:
从'react'导入React；导出默认值 () =>(<div><h1>来自博客的你好</h1><img src='../images/landscape-art_large.jpg'/>);
我想得到与我从开发模式、生产模式生成的捆绑文件中得到的结果相同的结果.
您应该通过 Web 服务器打开您的文件.因为您无法更改 file://api 上的位置历史记录.
I have this little app that works fine in development mode with webpack-dev-server, but when I use the bundled files from the dist folder generated by the production mode, all I get in the browser is this error:
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'.
How can I solve this pushState problem?
Initially I tried to split the code with React.lazy and Suspense, since webpack was throwing this error:
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.
But the problem persists.
You can see the code and the full repository here: 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>
);
The format of the other components is this one:
import React from 'react';
export default () => (
<div>
<h1>Hello from the Blog</h1>
<img src='../images/landscape-art_large.jpg' />
</div>
);
I want to get the same result that I,m getting from the development mode, from the bundled files generated by the production mode.
You should open your files via an Webserver. Because you cannot change location history on the file:// api.
这篇关于如何修复未捕获的 DOMException:无法在“历史记录"上执行“pushState"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
