如何修复未捕获的 DOMException：无法在“历史”上执行“pushState”答案

【问题标题】：How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'如何修复未捕获的 DOMException：无法在“历史”上执行“pushState”
【发布时间】：2019-09-16 19:06:17
【问题描述】：

我有这个小应用程序在 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>
);

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

【问题讨论】：

标签： reactjs react-router webpack-4

【解决方案1】：

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

【讨论】：

我能够在本地主机上使用 XAMPP 使其工作，但是在我使用 FileZilla 在 public_html 上上传相同的文件后，我遇到了同样的问题。您对我如何使其在托管服务提供商服务器上的投资组合网站上运行有任何建议吗？我和 justHost 在一起。谢谢。
您是通过 ftp:// 协议打开页面的吗？因为您应该直接打开页面。 HTTP://example.tld

【解决方案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 服务器一样工作。

【讨论】：

【解决方案3】：

我有这个错误（尽管在我的 react 应用程序中）因为我提供而不是 searchParams url，我将整个 url 放入 history.pushState http://localhost:9090/admin/model-type?PageNumber=2 但是搜索查询应该是?PageNumber=2

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

【讨论】：

这对我有用，当你考虑它时会很有意义