如何在 Electron 中使用 React Router？

IT技术 javascript reactjs react-router electron
2021-04-10 00:39:02

使用这个样板作为参考，我创建了一个Electron应用程序。它使用 webpack 来捆绑脚本并使用 express 服务器来托管它。

Webpack 配置实际上与this和 server 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 组件应用程序已安装。但是我如何将 react-router 集成到其中？

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

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

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

6个回答

不得不替换BrowserRouter为HashRouter。

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

然后在我的index.js或电子应用程序的入口文件中，我有这样的东西：

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

然后一切正常。

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

在此处阅读更多信息：

@IWIH 我有完全相同的一周，所以当我发现如何做时，我想我最好分享它以拯救其他一些可怜的灵魂。很高兴它为您节省了一些时间和理智！=-)
2021-05-25 00:39:02
字面意思*（面部）
2021-05-25 00:39:02
非常感谢它像魅力一样工作❤️你拯救了我的整个项目。
2021-05-29 00:39:02
在我的情况下，这个解决方案没有帮助。我仍然得到一个空白页:(
2021-06-10 00:39:02
男子！你拯救了我整个星期！我尝试了数以万亿计的组合，并像永远一样用谷歌搜索……现在，它就像魅力一样！谢谢
2021-06-16 00:39:02

另一种选择是改用hashHistory。实际上，在您引用的 repo 中，您可以看到他们正在使用hashHistory，尝试一下并回发怎么样？

HashRouter 已被弃用，所以我选择了 Niekert 的回答。github.com/ReactTraining/react-router/blob/master/packages/...
2021-05-29 00:39:02
HashRouter 2019 年未弃用。
2021-06-19 00:39:02

我正在使用 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>
);
您的解决方案有效，但重新加载电子会导致空白页面。这在“生产”中不是问题，但在开发中我经常需要重新加载。它发生在你身上吗？
2021-06-03 00:39:02
在加载应用程序方面工作，但未加载所有导入的资产（图像/视频）！
2021-06-19 00:39:02

在这个答案的时候最好的选择是使用MemoryRouter，为我工作:)

简单地使用 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 我也有同样的问题，
2021-05-29 00:39:02
每次刷新都会导致一个空站点，整个应用程序都需要刷新......你是如何解决这个问题的？
2021-06-09 00:39:02
其它你可能感兴趣的问题
上一篇在 React 不直接管理 DOM 的区域中，可以在浏览器中使用 ReactDOMServer.renderToString 吗？ 下一篇如何在没有不安全的内联 JavaScript/CSS 代码的情况下使用 React？