如何修复“Uncaught DOMException: Failed to execute 'pushState' on 'History'”错误

Question

我有一个小应用，在使用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>
);

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

- code_dude

Answer 1

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

- Nicolai Kamphenkel

---

我能够在本地主机上使用XAMPP使其正常工作，但是在使用FileZilla将相同的文件上传到public_html后，我遇到了相同的问题。您有任何建议吗？我该如何在托管提供商的服务器上使其在我的个人网站上正常工作？我使用的是justHost。谢谢。 - code_dude

你是通过ftp://协议打开页面的吗？因为你应该直接打开页面。HTTP://example.tld - Nicolai Kamphenkel

这很有效，在网页服务器中提供构建文件夹后，没有错误，且正常工作。 - Vijay Vavdiya

Answer 2

你可以使用HashRouter或MemoryRouter替代BrowserRouter。

只需替换此行：

import { BrowserRouter, Route, Link, Switch } from 'react-router-dom';

使用：

import { HashRouter, Route, Link, Switch } from 'react-router-dom';

或者使用：

import { MemoryRouter, Route, Link, Switch } from 'react-router-dom';

然后在浏览器中打开您已构建的index.html文件，一切应该像使用localhost / dev服务器一样正常工作。

- zrna

Answer 3

我在React应用程序中遇到了这个错误，原因是我提供了整个URL而不是searchParams url。 我把整个URL放入history.pushState中了http://localhost:9090/admin/model-type?PageNumber=2 ，但实际上预期的是搜索查询?PageNumber=2。

history.pushState(
        {[paramKey]: paramValue},
        'page title',
        url
      )

- Alexey Nikonov

---

这对我很有效，当你思考它时，它也非常有意义。 - joehanna