gpt4 book ai didi

reactjs - 如何修复未捕获的 DOMException : Failed to execute 'pushState' on 'History'

转载 作者:行者123 更新时间:2023-12-03 14:06:33 25 4
gpt4 key购买 nike

我有一个小应用程序,可以在 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

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 上的位置历史记录。

关于reactjs - 如何修复未捕获的 DOMException : Failed to execute 'pushState' on 'History' ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55881641/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com