Как получить доступ к сборкеact-app из локального файла («file: ///»), не используя HTTP-сервер?

Question

Мое требование заключается в том, что я должен использовать свой реагирующий SPA, загружая URL-адрес локального файла следующим образом

file:///C:/react/build/index.html

без использования HTTP-сервера.

В этом случае он корректно работает с HTTP-сервером, но в случае доступа к локальному URL-адресу файла только начальный компонент работает правильно, но маршрутизация не работает.

это дает следующие типы ошибок в chrome-

Uncaught DOMException: Не удалось выполнить pushState для «History»: A объект состояния истории с URL 'file: /// C: / реагировать / построить / Aboutus' не может быть создан в документе с источником 'null' и URL «Файл: /// C: /react/build/index.html'.

и в Firefox-

SecurityError: операция небезопасна. 1.d30e17d6.chunk.js: 1 нажатие /

пожалуйста, предложите мне какое-нибудь решение или приведите пример кода. и, пожалуйста, не предлагайте использовать какой-либо метод HTTP-сервера, потому что в этом случае я должен сделать это без использования HTTP-сервера.

Я использую метод create-response-app с response-router v4

Answer 1

У меня была очень похожая проблема, и я использовал маршрутизатор памяти , чтобы он работал, так как он фактически не менял URL. Также я изменил абсолютный маршрут на относительный маршрут, сконфигурировав package.json с "homepage": ".",, который официально не поддерживается response

Answer 2

эта проблема может быть решена с помощью {HashRouter} или {MemoryRouter} вместо использования {BrowserRouter}.

, а затем вы можете получить доступ к SPA из локальногофайловый протокол ("file:///xyz/index.html"), и ваша ссылка маршрутизатора будет работать нормально с реагирующим маршрутизатором для URL локального файла.

 - import { BrowserRouter as Router} from "react-router-dom"; //remove this line
 + import { HashRouter as Router} from "react-router-dom"; //try this line

or
--
+ import { MemoryRouter as Router} from "react-router-dom"; //try this line

также добавьте следующую строку в package.json для относительной ссылки.

"homepage": ".",