webpack-dev-server 使用 react-router 啓用 browserhistory 採坑記

問題的產生

今天下午請假，忙完手頭事以後，在家實在無聊，想着從0開始搭建一個 react 的項目。webpack 基本配置以前研究過，沒什麼大問題。誰想，在 react-router 的配置時出現了個大坑。

router 版本採用最新的5版本。官網提供 browserrouter 和 hashrouter 兩種方式，爲了項目的連接 url 好看，我選擇了第一種。

本地用 webpack 開發 react，固然 少不了 devserver，devserver提供一個靜態資源訪問服務。至關於在開發階段給你配置了一個服務器。因此，問題油然而生，router 中的路由其實自己訪問的應該是 router 中所配置的頁面組件，可是實際上訪問 的時 devserve 所提供的靜態資源，因此url 中的 path 映射到文件夾下，確定是404，找不到文件。沒想到啊，本地開發竟然有這種問題，虧我是有接近兩年工做經驗的前端，慚愧，不玩了，多學習，羞羞。

browserHistory 使用的是 H5 的 history api，js 經過 history.push 或者 history.replace 處理跳轉，頁面連接只是被 replace 掉，並無刷新頁面，所以速度快，展現效果好。

解決方案

經過查看 devserver 文檔，發現有配置項

按照官方文檔處理後，果真有效。重啓服務後，不存在的文件的 pathname 被 fallback 了。

至此，個人問題就解決了。
查看官網配置，發現也能夠傳遞一個對象，來進行精準匹配，前提是多入口打包的話。

問題延伸

同理，當我開發完成，把打包壓縮後的文件放置到服務器上時，訪問單頁路由連接時，依然會有此問題。

在此階段的我，對於服務器仍是一個小白，只能稍談一些解決方案

1. 後端服務針對前端路由作映射。