解决 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 即可解决问题。

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 中介绍的关于地址请求的内容。

相关