web-dev-qa-db-ja.com

React Electronを使用したルーター？

この定型文 を参照として使用して、 電子 アプリを作成しました。 webpackを使用して、スクリプトとエクスプレスサーバーをバンドルしてホストします。

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] Location "/Users/arjun/Documents/Github/electron-app/app/index.html" did not match any routes

ルートとしてファイルパスを使用しています。ボイラープレートのコードを調べても解決しませんでした。私は何が欠けていますか？

javascriptreactjsreact-routerelectron
29
Frozen Crayon

別のオプションは、代わりにhashHistoryを使用することです。実際、参照されているレポジトリで hashHistory を使用していることがわかります。

20
aestrro

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はファイルベースの環境向けです。

詳細はこちら：

28
Joshua Pinter

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>
);
23
Niekert

this のときの最良の選択肢は、 MemoryRouter を使用することです、私のために働いた:)

11
Gabriel Matusevich

（現在の） react-router docs say ：

一般的に、要求に応答するサーバーがある場合は<BrowserRouter>を使用し、静的ファイルサーバーを使用している場合は<HashRouter>を使用する必要があります。

Electronアプリは基本的に静的なファイルサーバーです。

MemoryRouter も機能します。ただし、すべてのルーティングがアプリのReact部分から発せられる場合に限ります。特定のページにナビゲートする場合にのみ落ちますブラウザプロセス。たとえば、新しいウィンドウをポップアップして「一般設定」ページに直接移動したい場合、HashRouterでこれを実行できます。

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

MemoryRouterで（ブラウザプロセスから）それを行う方法はないと思います。

3
starkos

Niekertに同意します。しかし、ルート管理の前にこのように処理する方が良いと思います。

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