Webpack-dev-serverでパラメータ付きルーティングがうまく働かない時の対処

前回の続きになります。

webpack.config.js内の devServer.historyApiFallback: trueを設定してあげるとうまくいく。...

 

経緯

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

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

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

例)

 

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

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

を入力

解決策

1.webpack.config.js内のoutput.publicPathの設定、

2.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は読んでいきたいと思います…

シェアする

  • このエントリーをはてなブックマークに追加

フォローする