解決 React-Router 在 Webpack-dev-server 的 HMR (hot-module-replacement) 時出現的 you cannot change <Router history> 錯誤

如果你使用 React-Router，那麼一定會搭配 Webpack 一起服用吧？而 Webpack-dev-server 的 HMR (hot-module-replacement) 可以讓開發速度更快，自動 reload 畫面，這次雖然沒有錯誤，但我們遇到了 warning，雖然不影響開發，也不影響上 code，但身為專業工程師就要解決 console 中的「紅字」對吧？讓我們來一探究竟。

錯誤如下圖

如果你的 Router 定義是類似這樣

相信你跟我一樣查了很多資料

例如：Getting `You cannot change <Router routes>; it will be ignored` when hot-loading

• 把你的 Route 從 Router 分開
• 把 Route 抽成 static element
• 把 Route 切離 module.hot
• 把 history 變成 props 從 ReactDOM.render 中當成 props 傳進去
• 升級 react-hot-loader
• 把 react-hot-loader 加入 .babelrc 的 plugins 中
• …族繁不及備載

其實你只要做一件事就可以解決了

維持原本的結構，並且把 history 部分抽離，變成 history.js 然後 import 進來就可以解決了。

後記

其實我自己之前沒遇到是因為，我本來就習慣把 history 抽出去，但這次為了方便快速居然踩了這個雷，以後還是細心微妙！

Hi 我是 Ryan，如果這篇文章有幫助到你，請你不吝嗇的給予我鼓掌，那將是我進步的動力！👏

另外，你知道 Medium 一篇文章拍手其實可以拍 50 下嗎？如果你願意，請賜我掌聲，謝謝！

Chih-Chien(Ryan) Hsu - ITC - Xuenn Pte Ltd | LinkedIn

Buy Ryan a Coffee - BuyMeACoffee.com