![](/img/trans.png)
[英]react:Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL
[英]How to fix Uncaught DOMException: Failed to execute 'pushState' on 'History'
我有這個小應用程序在 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
應用程序.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>
);
我想得到與我從開發模式、生產模式生成的捆綁文件中得到的結果相同的結果。
您應該通過Web服務器打開文件。 因為您無法在file:// api上更改位置歷史記錄。
我有這個錯誤(盡管在我的反應應用程序中)因為我提供而不是 searchParams url ,我將整個 url 放入 history.pushState http://localhost:9090/admin/model-type?PageNumber=2
但搜索查詢是預期?PageNumber=2
history.pushState(
{[paramKey]: paramValue},
'page title',
url
)
您可以使用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服務器一樣工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.