如何使用电子反应路由器？

Question

使用this boilerplate作为参考，我创建了一个Electron应用。它使用webpack捆绑脚本并表达服务器来托管它。

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

将文件路径作为路径。通过锅炉板代码没有帮助。我错过了什么？

Answer 1

另一种选择是使用 hashHistory 。实际上，在您引用的回购you can see that they're using hashHistory中，如何尝试并回发？

Answer 2

必须将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

Answer 3

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

Answer 4

（当前）react-router docs say：

  

一般来说，你应该使用＆lt; BrowserRouter＆gt;如果你有一个响应请求的服务器和一个＆lt; HashRouter＆gt;如果您使用的是静态文件服务器。

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

只要所有路由都来自应用程序的React部分，

MemoryRouter也可以正常工作。只有当您想要从浏览器流程导航到特定页面时，它才会失效，例如您想要弹出一个新窗口并直接导航到＆＃34;常规首选项＆＃34;页。在这种情况下，您可以使用HashRouter执行此操作：

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

我不认为有一种方法可以使用MemoryRouter（来自浏览器进程）。

Answer 5

同意Niekert。 但是我认为最好在进行任何路由管理之前进行这样的处理。

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

Answer 6

简单地使用Switch缺省为“ /”，如下所示：

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

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