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

Electron で react-router を使っていて、リロードすると真っ白になる現象の対処方法

通常ブラウザでreact-routeを使う時はBrowserRouterを使う

code:tsx

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

そこで HashRouter というやつを使う

これだとハッシュで管理されるので常に / にリクエストが行くようになる

code:tsx

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 みたいな書き方は古い書き方。