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

　　

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

　　本地啟動(dòng)服務(wù)localhost開發(fā)react-router相關(guān)項(xiàng)目時(shí)，碰到了問題，因?yàn)槭乔昂蠖嗽谕晃募A的，所以前端跑webpack-dev-server,這里面涉及到路徑的配置問題，以及對(duì)react-router的hash模式或者是history模式都有比較大的影響

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

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

　　1. localhost 服務(wù)配置

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

　　

?

?

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

　　

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

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

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

　　　1）history模式

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

　　　 2）hash模式

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

　　　

?

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

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

總結(jié)

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

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