如何将 React Router 与 Electron 一起使用？

Posted 2023-02-21

【中文标题】如何将 React Router 与 Electron 一起使用？

【英文标题】：How to use React Router with Electron?

【发布时间】：2016-07-30 01:26:08

【问题描述】：

使用this boilerplate 作为参考，我创建了一个Electron 应用程序。它使用 webpack 来打包脚本并使用 express server 来托管它。

Webpack 配置实际上与 this 和服务器 this 相同。

Electron 的脚本加载：

mainWindow.loadURL('file://' + __dirname + '/app/index.html');

并且 index.html 会加载服务器托管的脚本：

<script src="http://localhost:3000/dist/bundle.js"></script>

我运行electron index.js 来构建应用程序并运行node server 来启动使用webpack 捆绑脚本的服务器。

它工作正常，我的 React 组件 App 已安装。但是我如何将 react-router 集成到其中呢？

我以与在浏览器应用程序中相同的方式实现它。我收到此错误：

[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

它以文件路径为路径。浏览样板代码并没有帮助。我错过了什么？

【问题讨论】：

得到完全相同的东西。你找到解决方案了吗，@arjun-u – 还是你只是选择了 hashHistory？

我使用了 hashHistory。

【参考方案1】：

另一种选择是改用 hashHistory。实际上，在您引用的 repo you can see that they're using hashHistory 中，尝试一下并发回怎么样？

【讨论】：

HashRouter 已被弃用，所以我选择了 Niekert 的回答。 github.com/ReactTraining/react-router/blob/master/packages/…

HashRouter 在 2019 年不会被弃用。

【参考方案2】：

我正在使用 React Router v4 并且不想回退到 HashRouter，所以我通过以下方式解决了它：

import  Redirect, BrowserRouter  from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
      window.location.pathname.includes('index.html') && <Redirect to="/" />
    </div>
  </BrowserRouter>
);

【讨论】：

您的解决方案有效，但重新加载电子会导致空白页。这在“生产”中不是问题，但在开发中我经常需要重新加载。它发生在你身上吗？

在加载应用程序方面工作，但未加载所有导入的资产（图像/视频）！

【参考方案3】：

this 回答时的最佳选择是使用MemoryRouter，为我工作:)

【讨论】：

重新加载页面会丢失状态

【参考方案4】：

（当前）react-router docs say：

一般来说，如果你有一个响应请求的服务器，你应该使用 ，如果你使用的是静态文件服务器，你应该使用 。

Electron 应用基本上是一个静态文件服务器。

MemoryRouter 也可以工作，只要所有路由都来自应用程序的 React 部分。只有当您想从浏览器进程导航到特定页面时，它才会下降，例如您想弹出一个新窗口并直接导航到“常规首选项”页面。在这种情况下，您可以使用 HashRouter：

prefsWindow.loadURL(`file://$__dirname/app/index.html#/general-prefs`);

我认为没有办法使用 MemoryRouter（来自浏览器进程）来做到这一点。

【参考方案5】：

必须将BrowserRouter 替换为HashRouter。

import 
  HashRouter,
  Route
 from "react-router-dom";

然后在我的index.js 或 Electron 应用程序的入口文件中，我有这样的内容：

<HashRouter>
  <div>
    <Route path="/" exact     component= Home  />
    <Route path="/firstPage"  component= FirstPage  />
    <Route path="/secondPage" component= SecondPage  />
  </div>
</HashRouter>

然后一切正常。

推理：BrowserRouter 用于基于请求的环境，而HashRouter 用于基于文件的环境。

在这里阅读更多：

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md

【讨论】：

男人！你救了我整个星期！我尝试了数万亿种组合，并一直在谷歌上搜索它。现在，它就像魅力一样！谢谢

@IWIH 我有完全相同的一周，所以当我发现如何做时，我想我最好分享它以拯救其他一些可怜的灵魂。很高兴它为您节省了一些时间和理智！ =-)

字面意思*（掌心）

在我的情况下，这个解决方案没有帮助。我仍然得到一个空白页:(

非常感谢它就像一个魅力❤️你拯救了我的整个项目。

【参考方案6】：

同意尼克特的观点。 但我认为在进行任何路线管理之前最好这样处理。

if ( window.location.pathname.includes('index.html') ) 
    location.pathname = ROUTES.ROOT;

【参考方案7】：

如果简单地使用 Switch 来默认为“/”，如下所示：

<Switch>
  <Route path="/" exact component=Home/>
  <Route path="/foo" component=Foo/>
  <Route path="/bar" component=Bar/>
  <Route render=() => <Redirect to="/"/>/>
</Switch>

这样，“/index.html”会重定向到“/”

【讨论】：

每次刷新都会导致一个空站点，整个应用程序都需要刷新......你是如何解决这个问题的？

@maetulj 我也有同样的问题，