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

Question

使用此样板作为参考,我创建了一个Electron应用程序.它使用webpack捆绑脚本并表达服务器来托管它.

的WebPack配置是实质上相同的这个和服务器这样.

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

不得不更换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 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>
);

Answer 3

另一种选择是使用hashHistory.实际上,在您引用的仓库中,您可以看到他们正在使用hashHistory,如何尝试并回发？

Answer 4

这个答案的最佳选择是使用MemoryRouter,为我工作:)

Answer 5

（当前）反应路由器文档说：

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

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

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

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

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

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”将重定向到“/”