如何在 Electron 中使用 React Router？

Question

使用 this boilerplate as reference I created an Electron 应用程序。它使用 webpack 来捆绑脚本和 express server 来托管它。

Webpack 配置实际上与 this and 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组件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

我正在使用 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

当时 answer is to use the MemoryRouter 的最佳选择，对我有用:)

Answer 4

（当前）react-router docs say：

Generally speaking, you should use a <BrowserRouter> if you have a server that responds to requests and a <HashRouter> if you are using a static file server.

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

MemoryRouter 也可以工作，只要所有路由都源自应用程序的 React 部分。只有当你想从浏览器进程导航到特定页面时，它才会下降，例如您想要弹出一个新的 window 并直接导航到 "General Preferences" 页面。在这种情况下，您可以使用 HashRouter 来做到这一点：

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

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

Answer 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

Answer 6

同意 Niekert 的观点。但我认为在任何路由管理之前这样处理会更好。

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

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

如何在 Electron 中使用 React Router？

How to use React Router with Electron?

javascript

reactjs

react-router

electron

必须将 `BrowserRouter` 替换为 `HashRouter`。

如何在 Electron 中使用 React Router？

How to use React Router with Electron?

javascript

reactjs

react-router

electron

必须将 BrowserRouter 替换为 HashRouter。

必须将 `BrowserRouter` 替换为 `HashRouter`。