? ? ?自己本地寫了一個拉取網(wǎng)絡(luò)實時的統(tǒng)計數(shù)據(jù)的web，因為有服務(wù)端和客戶端，所以我為了方便，統(tǒng)一寫在了一個文件夾中，目錄結(jié)構(gòu)如下（最終目錄結(jié)構(gòu)）：

　　

?　　服務(wù)端的邏輯基本在server里面，web的相關(guān)代碼都在webroot中。

　　本地啟動服務(wù)localhost開發(fā)react-router相關(guān)項目時，碰到了問題，因為是前后端在同一文件夾的，所以前端跑webpack-dev-server,這里面涉及到路徑的配置問題，以及對react-router的hash模式或者是history模式都有比較大的影響

　　解決方案： 配置如上的目錄結(jié)構(gòu)，把dev的頁面放到根目錄下，只需配置下dev的資源輸出路徑，其他的就和本地直接開發(fā)web項目一樣了。

　　上面的方案說的很簡單，明確，但是個人走到這一步，確實碰到了許許多多的坑，也涉及到了一些react-router的解析原理，這里就說下我碰到的坑

　　1. localhost 服務(wù)配置

　　以常規(guī)想法，web的項目都在同目錄（webroot）

　　

?

?

?　　此時，只需要在配置dev-server的publicPath和資源輸出路徑即可

　　

?　　那么本地服務(wù)就跑起來了，當(dāng)然首頁的鏈接就不是常見的鏈接，而是localhost:8083/webroot；

　　2.非常規(guī)本地服務(wù)域名，對react-router的影響

　　　顯然，localhost:8083/webroot,多了個目錄webroot,從我自己的調(diào)試結(jié)果來看，對react-router匹配是有影響的。具體的兩種模式的影響如下：

　　　1）history模式

　　　　個人理解該模式，就是自己通過window.history.pushState來改變頁面url但是不刷新頁面，這個特性來實現(xiàn)單頁面操控的，即在react-router初始化的時候,在點擊router-link或者browserHistory.push時，只需觸發(fā)window.history.pushState即可改變當(dāng)前路由

　　　 2）hash模式

　　　　個人理解該模式，這種模式，通過的就是location.hash來改變路由地址，當(dāng)然即使改變了，本頁面也不會出現(xiàn)刷新，也不會出現(xiàn)刷新該頁面，出現(xiàn)404錯誤。

　　　

?

?　　為了弄清楚多一層文件殼子為什么會干擾到react-router得匹配組件，去找他對應(yīng)得跳轉(zhuǎn)路由時得源碼，一步步的追尋調(diào)試路由跳轉(zhuǎn)的過程，最終發(fā)現(xiàn)react-router也是基于react Dom-diff算法去修改整個dom得，如上圖，這里只是觸發(fā)了一個setState以及參數(shù)是新生成得location對象，這里我目前就先止步了，這個應(yīng)該和路由匹配規(guī)則有關(guān)，因為目前得狀況是路由是/home，匹配不了localhost:8083/webroot/home,另外一種hash模式也不行，只能用模糊匹配，并且是‘/’這個才能匹配到一個頁面切僅能匹配到一個。里面具體得react-router和服務(wù)域名得匹配待以后有時間再去研究。畢竟這個當(dāng)時就是為了解決包含文件夾的dev-server問題，后面靈光一閃，想到靜態(tài)本地開發(fā)資源可以放到根目錄（那么開發(fā)模式就不用多了一層文件夾了），不必要非放到web目錄中（雖然顯得不分類別整齊），但是能解決這個問題也不算一個好方式，當(dāng)然這種場景其實在實際開發(fā)中基本不回出現(xiàn)把，這也是本人自己業(yè)余的項目和自己研究，與大家分享下

轉(zhuǎn)載于:https://www.cnblogs.com/ylHeyden/p/11526322.html

總結(jié)

以上是生活随笔為你收集整理的webpack 配置react-router 服务，及react-router浅析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。