【React】react-routerでリロードするとページが表示されないエラーの対処法

今回はreact-routerの遷移先のURLでリロードするとページが表示されないエラーや、ブラウザの戻る・進むボタンを使うとページが表示されないエラーの対処法を紹介します。

webpack-dev-serverを使っている場合

webpack環境でローカルサーバーの立ち上げにwebpack-dev-serverを使っている人はwebpack.config.jsのdevServerの箇所に以下の記述を追加すればokです。

devServer: {
  historyApiFallback: true // ←これを追加
}

<BrowserRouter>ではなく<HashRouter>を使うという方法があります。

#がつくのでURLは汚れてしまいますが、特に問題なければ大丈夫でしょう。

BrowserRouterの代わりにHashRouterをインポートして使えばokです。

import { HashRouter, Route, Link, Switch } from 'react-router-dom';
<HashRouter>
  <Switch>
    {/* <Route />など */}
  </Switch>
</HashRouter>

以下の記事でreact-routerの使い方を解説しています。

使い方がよくわからない人はぜひ参考にしてみてください。

ZennでCSS設計の
本を書きました！

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です！