ただの恥ずかしい話です。恥ずかしいのでいっそ見せつけようと思いました。こんなことに数時間悩まされたのが悔しすぎるので殴り書き

経緯

ぼく「electron+Reactでなんか作りたーい」
先輩のアドバイスで electron-react-boilerplate を知ったぼく「ええやん、使うか」
ぼく「自分で作ったページ入れたいよな」
ぼく「コンポーネントできた。Routerに入れて終わりや！」
アホぼく「to Sample押してもページ遷移しないけど」

内容

↓これをもとにパスを設定してそう。今回自作したのはsample

routes.json{
  "HOME": "/",
  "COUNTER": "/counter",
  "SCSHOT": "/sample"
}

Routeつけたせばええんやろ。書いたで
誤

Routes.js...
import { Switch, Route } from 'react-router';
import routes from './constants/routes.json';
import App from './containers/App';
...// 中略

  <App>
    <Switch>
      <Route path={routes.COUNTER} component={CounterPage} />
      <Route path={routes.HOME} component={HomePage} />
      <Route path={routes.sample} component={SamplePage} />
    </Switch>
  </App>

正

Routes.js...// 中略
  <App>
    <Switch>
      <Route path={routes.sample} component={SamplePage} />
      <Route path={routes.COUNTER} component={CounterPage} />
      <Route path={routes.HOME} component={HomePage} />
    </Switch>
  </App>

routes.HOMEは"/"でしたね。誤と正でRouteタグ要素の順番が違うのがわかるでしょうか。誤の状態でroutes.sample すなわち"/sample"にアクセスするとどうなるでしょう。まず"/"がマッチするのでHomePageがレンダリングされてしまいます。許さん。なのでroutes.sampleが先にマッチするように上に書きます。

↓こっちの方が良さそう

Routes.js...// 中略
  <App>
    <Switch>
      <Route exact path={routes.HOME} component={HomePage} />
      <Route path={routes.sample} component={SamplePage} />
      <Route path={routes.COUNTER} component={CounterPage} />
    </Switch>
  </App>

exact path={routes.HOME}するとパス部が"/"と完全に一致しない限りHomePageはレンダリングされません。しあわせ

まとめ

routerがおかしいってなったらマッチの順番気にするとかexact pathを使ってみるとかの選択肢を頭に入れとけ

チクショーーーーーーー！！！！！！！！！！

書いたら怒りが収まったので次に進みます。
間違いがあればマサカリをやさしく置いてください