環境

PC

mac OS Ctalina : 10.15.4

package.json

connected-react-router : 6.8.0
eslint-loader : 4.0.2
react : 16.13.1
react-dom : 16.13.1
react-redux : 7.2.0
react-router-dom : 5.1.2
redux : 4.0.5
electron : 8.2.5

概要

以下、迷い込むまでの道のり

Electronでアプリ作ったろ
reactいれてみたろ
ならreduxいれたろ
react-routerいれたろ、redux使ってるからconnected-react-routerいれたろ
よっしゃ、いつも通りroutingの構文かくで〜
ページ真っ白やん・・・

解

結局、これだ！っていう解は見つかってないんですが、回避策は見つけました。
気づいたきっかけはコレ。
f:id:devdaikichi:20200511223029p:plain

(開発者ツールでURLを表示してみました)
そもそも、localhostなりにサーバ建ててる訳じゃ無いからそうなるわな・・・。
で、こうなってるともちろんrouterで
<Route exact path="/" component={Hoge} />とかやっても表示されない訳です。

解1: exactを使わない

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route path="/fuga" component={fuga} />
        <Route path="/" component={hoge} />
      </Switch>
    </ConnectedRouter>
  </Provider>,
  document.getElementById("root")
);

こんな感じにするとうまい具合に動きます。
Routeで定義したものはもちろん上から評価されるので、exactを使わない場合はこう書くしかないですね
ちなみに今回、こちらのボイラープレートのソースを参考にしてましたが

github.com

exact使ってませんね、ハイ。
exact使わずに書いてるのは今回みたいな事象があるからなのかな？と思ってます。

解2

こんな方法もあるっぽいです。

medium.com

要するにHashRouterを使うことで、静的ページのRoutingを行えるようにしてるってことですね。
<ConnectedRouter>で<HashRouter>を囲むのがいい方法なのかどうかはわかってないので
今回はこの方法は見送りました。
ちなみにこの方法でいくと、URLはこんな感じになります。

f:id:devdaikichi:20200511224842p:plain

Electronでアドレスバーは出ないので、問題はないんですが
私はこのURL,あまり好きでは無いです・・・。

解3(?)

試してないんですが、これでいけるんじゃない？ってのを一つ。
Electronのアプリを作成するにあたって
起動オプション等を設定するファイル(レンダープロセスとかの)を作成すると思うんですが
そこでloadURL関数を使えばlocalhostを読めますよね
要はlocalhostでreactのWebサーバを建てておいて、そいつをElectronで読み込みにいけば
うまくexact効かせられるんじゃないかなーと思ってます。
でもこの方法使うと本末転倒な気が・・・？

終わりに

そもそもElectron + React + Redux + react-routerの組み合わせって一般的なのだろうか
画面遷移についてあまり深く考えたくないからreactやらreact-router使ってみたんですが
余計悩んでしまって、これまた本末転倒な感じになってしまいました。
とはいえ回避策っぽいものは見つかったので、このまま作ってみようと思っています。

現場からは以上です。

わしのlog

プログラミングとかバイクとか。

【メモ】Electron + React + Redux + react-routerでexactが効かない

環境

PC

package.json

概要

解

解1: exactを使わない

解2

解3(?)

終わりに