Javascript 如何在 Electron 中使用 React Router？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36505404/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use React Router with Electron?
提问by Frozen Crayon
Using this boilerplateas reference I created an Electronapp. It uses webpack to bundle the scripts and express server to host it.
使用这个样板作为参考，我创建了一个Electron应用程序。它使用 webpack 来捆绑脚本并使用 express 服务器来托管它。
Webpack config is practically same as thisand server this.
Webpack 配置实际上与this和 server this相同。
Electron's script loads:
Electron 的脚本加载：
mainWindow.loadURL('file://' + __dirname + '/app/index.html');
mainWindow.loadURL('file://' + __dirname + '/app/index.html');
And index.html loads the script hosted by the server:
并且 index.html 加载服务器托管的脚本：
<script src="http://localhost:3000/dist/bundle.js"></script>
<script src="http://localhost:3000/dist/bundle.js"></script>
I run electron index.jsto build the app and node serverto start server which using webpack bundles the scripts.
我运行electron index.js以构建应用程序并node server启动使用 webpack 捆绑脚本的服务器。
It works fine, my React component App is mounted. But how I integrate react-router into this?
它工作正常，我的 React 组件应用程序已安装。但是我如何将 react-router 集成到其中？
I implemented it the same way I would in a browser app. I get this error:
我以与在浏览器应用程序中相同的方式实现它。我收到此错误：
[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes
[react-router] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes
It is taking file path as the route. Going through the boiler plate code did not help. What am I missing?
它以文件路径为路径。通过样板代码没有帮助。我错过了什么？
采纳答案by aestrro
Another option would be to use hashHistoryinstead. Actually, in your referenced repo you can see that they're using hashHistory, how about trying that and posting back?
另一种选择是改用hashHistory。实际上，在您引用的 repo 中，您可以看到他们正在使用hashHistory，尝试一下并回发怎么样？
回答by Joshua Pinter
Had to Replace BrowserRouterwith HashRouter.
不得不替换BrowserRouter为HashRouter。
import {
HashRouter,
Route
} from "react-router-dom";
And then in my index.jsor the entry file of the Electron app I had something like this:
然后在我的index.js或电子应用程序的入口文件中，我有这样的东西：
<HashRouter>
<div>
<Route path="/" exact component={ Home } />
<Route path="/firstPage" component={ FirstPage } />
<Route path="/secondPage" component={ SecondPage } />
</div>
</HashRouter>
And then everything just worked.
然后一切正常。
The reasoning: BrowserRouteris meant for request-based environments whereas HashRouteris meant for file-based environments.
推理：BrowserRouter适用于基于请求的环境，而HashRouter适用于基于文件的环境。
Read more here:
在此处阅读更多信息：
回答by Niekert
I'm using React Router v4 and didn't want to fallback to the HashRouter, so I solved it with something amongst the likes of:
我正在使用 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>
);
回答by Gabriel Matusevich
Best option at the time of thisanswer is to use the MemoryRouter, worked for me :)
在这个答案的时候最好的选择是使用MemoryRouter，为我工作:)
回答by J. Perkins
The (current) 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.
一般来说，如果你有一个响应请求的服务器，你应该使用 <BrowserRouter>，如果你使用静态文件服务器，你应该使用 <HashRouter>。
An Electron app is basically a static file server.
Electron 应用程序基本上是一个静态文件服务器。
MemoryRoutercan also work, so long as all routing originates from within the React part of the app. It only falls down when you want to navigate to a specific page from the Browser process, e.g. you want to pop up a new window and navigate directly to a "General Preferences" page. In that case, you can do this with HashRouter:
MemoryRouter也可以工作，只要所有路由都来自应用程序的 React 部分。只有当您想从浏览器进程导航到特定页面时它才会下降，例如您想弹出一个新窗口并直接导航到“常规首选项”页面。在这种情况下，您可以使用 HashRouter 执行此操作：
prefsWindow.loadURL(`file://${__dirname}/app/index.html#/general-prefs`);
I don't think there is a way to do that with MemoryRouter (from the Browser process).
我不认为有办法用 MemoryRouter（来自浏览器进程）来做到这一点。
回答by Arseniy-II
Agree with Niekert. But I believe it is better to handle like this before any route management.
同意 Niekert。但我相信在任何路由管理之前像这样处理会更好。
if ( window.location.pathname.includes('index.html') ) {
location.pathname = ROUTES.ROOT;
}
回答by ChisholmKyle
What about simply using Switch to default to "/" as follows:
简单地使用 Switch 默认为 "/" 怎么样：
<Switch>
<Route path="/" exact component={Home}/>
<Route path="/foo" component={Foo}/>
<Route path="/bar" component={Bar}/>
<Route render={() => <Redirect to="/"/>}/>
</Switch>
This way, "/index.html" will redirect to "/"
这样，“/index.html”将重定向到“/”
