HashRouter與BrowserRouter的異同


項目中控制路由跳轉使用的是BrowserRouter

在開發過程中使用是沒有問題的,但是將頁面上傳至服務器之后,問題就來了:用戶訪問的資源不存在,頁面是空白的。

原因:

在browserHistory 模式下,URL 是指向真實 URL 的資源路徑,當通過真實 URL 訪問網站的時候,由於路徑是指向服務器的真實路徑,但該路徑下並沒有相關資源,所以用戶訪問的資源不存在。

 

經過排查懷疑是路徑的問題,將BrowserRouter 改為 HashRouter之后,問題解決了~

問題分析

首先分析下出現此問題的原因: 在React項目中我們經常需要采用React-Router來配置我們的頁面路由,React-Router 是建立在 history 之上的,常見的history路由方案有三種形式,分別是:

  • hashHistory
  • browserHistory
  • createMemoryHistory

本地開發時,使用browserHistory是沒有問題的,這是因為webpack.config.js中使用 webpack-dev-server 已經做了配置


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM