涉及到的知識點(diǎn)如下：
- webpack
- node.js的Express服務(wù)器框架
- react.js中的react-router庫中的BrowserRouter組件
- 當(dāng)我們利用webpack將react.js應(yīng)用打包成bundle.js后，在index.html中的引用形式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title>金鳳針織CMS后臺(tái)管理</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="/build/bundle.js"></script>
</body>
</html>
- 于是當(dāng)我們在瀏覽器上訪問tomcat服務(wù)器的http://xxxxxx:8080/clothShopCMS/index.html的時(shí)候（其實(shí)也可以http://xxxxxx:8080/clothShopCMS/，因?yàn)閠omcat默認(rèn)會(huì)索引/clothShopCMS項(xiàng)目下的引導(dǎo)頁面） 會(huì)去加載bundle.js腳本文件，而這個(gè)由webpack打包生成的js文件，就是我們利用react.js編寫出來的應(yīng)用。進(jìn)而用戶在應(yīng)用上通過BrowserRouter的路由進(jìn)行跳轉(zhuǎn)的時(shí)候，其實(shí)是“偽跳轉(zhuǎn)”它是由js實(shí)現(xiàn)的。但雖然是“偽跳轉(zhuǎn)”，但它也同時(shí)修改了瀏覽器的url(這是本人自己的觀點(diǎn)，可能是為了迎照一種真跳轉(zhuǎn)的感覺)。
但是當(dāng)我們在某個(gè)頁面進(jìn)行瀏覽器的刷新時(shí)候（通過F5，或者瀏覽器上面的刷新按鈕），就是馬上出現(xiàn)404的問題，是什么原因呢？
很簡單，由于你通過webpack打包生成的react.js應(yīng)用是通過項(xiàng)目根目錄下的index.html作為入口才進(jìn)入react.js應(yīng)用的（也就是俗稱的單頁面應(yīng)用路由），先前通過“偽跳轉(zhuǎn)”后，瀏覽器的url發(fā)生變化，由最初的/clothShopCMS變成了/clothShopCMS/login,此時(shí)進(jìn)行刷新的話，瀏覽器就會(huì)重新請求http://xxxxxx:8080/clothShopCMS/login，很明顯，你的/clothShopCMS項(xiàng)目下并沒有能處理/login請求的能力，所以就出現(xiàn)了404問題。如果解決該問題呢？畢竟刷新這個(gè)操作是用戶頻繁進(jìn)行的動(dòng)作。這時(shí)候就需要服務(wù)端來支持了。服務(wù)器端解決以上404問題的原理是：當(dāng)瀏覽器接收到/clothShopCMS的子路徑的時(shí)候，重定位到/index.html資源，這樣子相當(dāng)于瀏覽器輸入了/clothShopCMS，然后/login路徑，通過BrowserRouter組件再次跳轉(zhuǎn)成相應(yīng)的頁面，就完成了刷新的動(dòng)作。
其中服務(wù)器可以使用：
1). javaweb的Spring mvc
2). node.js框架的Express：這個(gè)比較推薦，快速便捷，畢竟我們只是要通過服務(wù)器進(jìn)行重定向這個(gè)簡單的功能；
- 這里就進(jìn)行介紹下Express服務(wù)器搭建的方式：
參考文章：
https://www.cnblogs.com/mq0036/p/5243312.html#toc5
https://www.cnblogs.com/developerdaily/p/6795448.html
http://blog.csdn.net/lvshaorong/article/details/52344733
