专栏首页jiajia_deng解决 react router 4.0.0 原地刷新页面提示 Cannot GET * 错误

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

相关

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • ES6 学习笔记之变量的解构赋值

    ES6 中增加了几种对变量初始化的方式,从改进来看,个人觉得可以大大的增加编码的效率。带相对语法可能就晦涩一些了。但总归熟能生巧,多用就不会那么容易犯错了。

    我与梦想有个约会
  • React 学习笔记之创建 React 项目

    在 src/index.js 中有如下代码,程序首先导入了 React 和 ReactDom 模块,并导入了一个当前目录下的 App 模块。随后在代码中使用 R...

    我与梦想有个约会
  • React 项目中使用 highstocks

    highstocks 是一个功能强大且丰富的股票资讯类图表的库,其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的...

    我与梦想有个约会
  • 如何理解二分查找?生活中还能用来设计骗局?

    版权声明:本文为苦逼的码农原创。未经同意禁止任何形式转载,特别是那些复制粘贴到别的平台的,否则,必定追究。欢迎大家多多转发,谢谢。

    帅地
  • 口红颜色千千万,这款小程序想帮你(女神)挑个好看的

    今天,知晓程序(微信号 zxcx0101)要安利的这款小程序——口红 IN,已经帮你做足了购买功课。

    知晓君
  • 重载、重写---C#

    2).实例方法: 相反,实例方法就是方法前面不加关键字static,直接通过new运算符,实例化一个对象后,通过创建的对象来点出来,实例方法;而且,它是...

    静心物语313
  • 使用HttpClient的优解

    新工作入职不久,目前仍然还在适应环境当中,笔者不得不说看别人的源码实在是令人痛苦。所幸前些日子终于将工作流畅地看了一遍,接下来就是熟悉框架技术的阶段了。 也正是...

    潘成涛
  • win10 uwp 设置 HttpClient 浏览器标识

    最近在使用 smms 图床上传发现需要使用 UserAgent ,不然不会返回值。 所以我就询问了群里大神,他们告诉我需要设置 UserAgent ,本文就是告...

    林德熙
  • Hbase memstore 的刷写时机

    如果一个 HRegion 中 Memstore 过多,每次flush 的开销必然会很大,因此我们也建议在进行表设计的时候尽量减少 ColumnFamily 的个...

    sundyxiong
  • Scala基础 - 下划线使用指南

    joymufeng

扫码关注云+社区

领取腾讯云代金券