Electronでreact-routerを使う時はHashRouterを使う

2022-01-05

Electron で react-router を使っていて、リロードすると真っ白になる現象の対処方法通常ブラウザでreact-routeを使う時はBrowserRouterを使う

 import React, { Component } from 'react';
 import { Route, Switch } from 'react-router';
 import { BrowserRouter } from 'react-router-dom';
 import Top from './top';
 import Config from './config';

 class App extends Component {
   render() {
     return (
       <BrowserRouter>
         <Switch>
           <Route path="/config" component={Config} />
           <Route path="/" component={Top} />
         </Switch>
       </BrowserRouter>
     );
   }
 }

 export default App;

BrowserRouter は path をそのままURLのPATHで表現してくれるやつ
http://localhost/
http://localhost/config

しかし、Electron においてリクエストは / に来るような想定になっているので、BrowserRouter を使っているとおかしくなる。
- そこで HashRouter というやつを使う
  - Hash は #... というやつ（だとおもう）
- これだとハッシュで管理されるので常に / にリクエストが行くようになる

import React, { Component } from 'react';
import { Route, Switch } from 'react-router';
import { HashRouter } from 'react-router-dom';
import Top from './top';
import Config from './config';

class App extends Component {
  render() {
    return (
      // Electron では BrowserRouter ではなく HashRouter を使う
      <HashRouter>
        <Switch>
          <Route path="/config" component={Config} />
          <Route path="/" component={Top} />
        </Switch>
      </HashRouter>
    );
  }
}

export default App;

Router history=hashHistory みたいな書き方は古い書き方。 Electronのproduction環境でasarにある画像などのリソースがnet::ERR_FILE_NOT_FOUNDで読み込めないのはBrowserRouterが原因でした
バンドル(data:base64~)できていない画像等を読み込む際にdev環境では正しく動くが、build後のパスがおかしくなりだめになった。Hashにしたら治った

月別アーカイブ