前回の続きになります。

Webpack の dev-server で React の Routing を適応する

経緯

webpack の dev-server で React の Routing を設定する場合は、

devServer.historyApiFallback を true に設定する必要がありました。

それで直接 URL を入れるとうまくは行ったんですが…値付きパラメータを含んだリンクをブラウザの URL から直接リクエストした際には選択しても何も表示されない(null)という現象が起こっていました。

例）

Route path=”/products/:id” component={ProductPage} /

を設定して、ブラウザから root/products/有効な数値

を入力

解決策

１．webpack.config.js 内の output.publicPath の設定、

２．index.html 内のパスを root ディレクトリからの絶対パス表記に変更

対策

トップページから bundle.js を読み込ませる場合、ルートディレクトリからの絶対パス表記にしないと、うまく動いてくれない。

〇 <script src=”/bundle.js”></script>

× <script src=”bundle.js”></script>

Actually, if I change ./static/app.js to just /static/app.js it works. Not sure which form is correct. I’ve been using that period-prefixed form for years. D:

historyApiFallback doesn’t work, for scripts, if you’re nested multiple path sections deep

あとはルートディレクトリを webpack.config.js 上でも定義してあげる。

output: {
	path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
        publicPath:'/'　//ここを追加
    },

URL のマッチングの兼ね合い？

webpack dec-server でも同じことをさせる devServer.historyApiFallback を true に設定する必要がありました。

とりあえず解決はしたのですが、Rouitng 時に相対パスが良くないっぽい。履歴に渡されたけど、解釈は絶対パスだから相対パスがずれてるのかなぁ…

また React Router は読んでいきたいと思います…