react項目打包部署上線完畢后，刷新報錯404

報錯分析：

在瀏覽器內可以從首頁跳轉到其他路由地址，而不報錯是因為這些是由前端自己渲染的。React Router定義的對應路由，腳本並沒有刷新訪問請求后台數據，是JS動態更改的location。

當刷新時，先訪問的是后台地址，反饋數據后再加載頁面內的React代碼，最后才在瀏覽器內執行，這時報錯404。是因為后台並沒有針對這個過程的路由給出返回的HTML內容，就沒有執行React-Router。

 

只需要把原來的BrowserRouter替換成HashRouter,這樣所有的請求都會定位在index.html頁面，服務器端就不需要做任何的配置了。

 

路由控制為BrowserRouter時，URL是指向真實URL的資源路徑，當通過真實URL路徑訪問網站時，由於路徑是指向服務器的真實路徑，而該路徑下並沒有相關的資源，所以訪問時就報錯404.

 

在React項目中采用React-Router來配置頁面路由時，React-Router是建立在history基礎上，常見的history路由方案有三種形式：

1、hashHistory

2、browserHistory

3、createMemoryHisory

 

在本地開發時使用BrowserRouter是不出現問題的，因為在webpack.config.js中使用了webpack-dev-server就已經做好了配置。

1. BrowserRouter： http://localhost:8080/abc/def
2. HashRouter： http://localhost:8080/#/abc/def

如果在服務器動態支持時就使用BrowserRouter，否則使用HashRouter。因為單純的靜態頁面路徑從/切換到/abc之后，這時刷新頁面將會無法正常訪問

 

如果覺得寫服務器配置文件麻煩的話就直接使用HashRouter 。