如何在不使用任何 HTTP 服务器的情况下从本地文件 url ("file:///") 访问 react-app build？

Question

我的要求是我必须通过加载本地文件 URL 来使用我的 react SPA，如下所示

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

不使用任何 HTTP 服务器。

在这种情况下，它与 HTTP 服务器正常工作，但在本地文件 URL 访问的情况下，只有初始组件正常工作，但路由不工作。

它在 chrome 中给出了以下类型的错误 -

未捕获的 DOMException：无法在“History”上执行“pushState”：无法在来源为“null”且 URL 为“file”的文档中创建 URL 为“file:///C:/react/build/Aboutus”的历史状态对象:///C:/react/build/index.html'。

在 Firefox 中——

SecurityError：操作不安全。1.d30e17d6.chunk.js:1 push/< createBrowserHistory.js:153 confirmTransitionTo createTransitionManager.js:33 push createBrowserHistory.js:146 e/i.handleClick Link.js:99 p/< react-dom.production.min。 js:49 p react-dom.production.min.js:45 p/< react-dom.production.min.js:73 p react-dom.production.min.js:72 S react-dom.production.min。 js:168 E react-dom.production.min.js:158 j react-dom.production.min.js:232 Tn react-dom.production.min.js:1712 Za react-dom.production.min.js: 5451 Dt react-dom.production.min.js:660 Sn react-dom.production.min.js:1754 Fa react-dom.production.min.js:5479 Cn react-dom.production.min.js:1731 Cn自托管：1018:17

请给我一些解决方案或给我一些示例代码。并且请不要建议使用任何 HTTP 服务器方法，因为在这种情况下，我必须在不使用任何 HTTP 服务器的情况下执行此操作。

我在 react-router v4 中使用 create-react-app 方法

Answer 1

这个问题可以使用{HashRouter}或{MemoryRouter}代替使用来解决{BrowserRouter}。

然后您可以从本地文件协议访问 SPA ("file:///xyz/index.html")，您的路由器链接将与 react-router 一起用于本地文件 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": ".",