項目中控制路由跳轉使用的是BrowserRouter
在開發過程中使用是沒有問題的,但是將頁面上傳至服務器之后,問題就來了:用戶訪問的資源不存在,頁面是空白的。
原因:
在browserHistory 模式下,URL 是指向真實 URL 的資源路徑,當通過真實 URL 訪問網站的時候,由於路徑是指向服務器的真實路徑,但該路徑下並沒有相關資源,所以用戶訪問的資源不存在。
經過排查懷疑是路徑的問題,將BrowserRouter 改為 HashRouter之后,問題解決了~
問題分析
首先分析下出現此問題的原因: 在React項目中我們經常需要采用React-Router來配置我們的頁面路由,React-Router 是建立在 history 之上的,常見的history路由方案有三種形式,分別是:
- hashHistory
- browserHistory
- createMemoryHistory
本地開發時,使用browserHistory是沒有問題的,這是因為webpack.config.js中使用 webpack-dev-server 已經做了配置