解決 react router 4.0.0 原地刷新頁面提示 Cannot GET * 錯誤

最近一直在跟着 react 官網和一些國內成熟的視頻教程學習一些 react 的技巧和作一些小項目。這幾天碰到一個問題就是使用 新版的 react-router-dom 做爲路由時會致使全部二級以上頁面原地刷新提示錯誤,相似的錯誤內容如 Cannot GET /company/zs/000001,以下圖所示:

隨後 google 搜索關鍵字 react router Cannot GET /company/zs/000001 找到 stackoverflow 的答案,裏面內容介紹到使用 Hash History 或者 Browser History 來解決問題,搜索 hashHistory 發現 hashHistory 在 react-router 4.0.0 版本已經停用,目前項目使用的是 4.0.0 版本,因此 google 了一下 react router 4.0 hashhistory,找到以下答案:hashHistory stopped working in 4.0.0,將原有 Router 替換爲 HashRouter 便可解決問題。react

import React from 'react';
import ReactDOM from 'react-dom';
import {
  HashRouter,
  Route,
  Link
} from 'react-router-dom';

ReactDOM.render((
   <HashRouter>
      <div>
        <Route exact path="/" component={Login} />
        <Route path="dashboard" component={Dashboard} />
        <Route path="users" component={Users} />
      </div>
   </HashRouter >
), document.getElementById( 'page' ) )

這樣處理之後,URL 地址中都會有一個 # 號來表示這是本地地址,如此便不會對服務器產生請求,更多的內容請看上面 stackoverflow 中介紹的關於地址請求的內容。git

相關文章
相關標籤/搜索