Как исправить Uncaught DOMException: не удалось выполнить «pushState» для «History» - PullRequest
Новая
       29

Как исправить Uncaught DOMException: не удалось выполнить «pushState» для «History»

1 голос
/ 27 апреля 2019

У меня есть это маленькое приложение, которое отлично работает в режиме разработки с 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>
);

Я хочу получить тот же результат, что и я, получая из режима разработки, из связанных файлов, сгенерированных производствомрежим.

Ответы [ 2 ]

1 голос
/ 27 апреля 2019

Вы должны открыть свои файлы через веб-сервер. Потому что вы не можете изменить историю местоположений в файле: // api.

0 голосов
/ 12 июня 2019

Вы можете использовать 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.

...