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

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

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

 

スポンサーリンク

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

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

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

 

BrowserRouterの代わりにHashRouterを使う

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

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

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

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

 

react-routerの使い方がわからない人は…

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

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

>>【React】react-routerの使い方を丁寧に解説