[React][webpack]テスト環境でルートパス以外表示できない時の対処法

環境

    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"

現象1

/ 以外にアクセスすると 404 Not Found になる。

解決法1

webpack.config.js に以下のように書き足す。

webpack.config.js

:
module.exports = {
    :
    devServer: {
        historyApiFallback: true,
    },
    :
}

現象2

ルーターにサブディレクトリを指定し、サブディレクトリに直接アクセスすると、 bundle.js が 404 Not Found になって真っ白になる。

解決法2

webpack.config.js の output に publicPath: '/' を書き足す。

webpack.config.js

:
module.exports = {
    :
    output: {
        :
        publicPath: '/',
    },
    :
}

参考

• deep router refresh 404 · Issue #978 · webpack/webpack-dev-server · GitHub