在React项目中我们经常需要采用React-Router来配置我们的页面路由,React-Router 是建立在 history 之上的,常见的history路由方案有三种形式,分别是:

  1.hashHistory

  2.browserHistory

  3.createMemoryHistory

如果使用hashHistory ,访问的页面url如 example.com/#/some/path 的路由。

于是采用第二种browserHistory,但是部署到自己的服务器之后,可以正常访问,但是强制刷新页面之后报404找不到页面路径

Nginx配置方式如下

server {
server_name react.thinktxt.com;
listen 80; root /Users/txBoy/WEB-Project/React-Demo/dist;
index index.html;
location / {
try_files $uri /index.html;
}
}
访问后刷新,解决404问题

React-Router browserHistory浏览器刷新出现页面404解决方案的更多相关文章

  1. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  2. jquery刷新iframe页面的方法

    1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当 ...

  3. jquery刷新iframe页面的方法(兼容主流)

    1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取 ...

  4. JS怎么刷新当前页面

    JS怎么刷新当前页面 reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从 ...

  5. JS 怎么刷新当前页面

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...

  6. 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  7. tomcat 部署 React 项目后,浏览器刷新报404问题

    问题:tomcat部署了react前端项目,可以正常访问,但是页面刷新就报404 一.问题截图 二.解决办法 在tomcat 配置文件web.xml中配置如下代码: web.xml 路径: apach ...

  8. React+React Router+React-Transition-Group实现页面左右滑动+滚动位置记忆

    2018年12月17日更新: 修复在qq浏览器下执行pop跳转时页面错位问题 本文的代码已封装为npm包发布:react-slide-animation-router 在React Router中,想 ...

  9. Vue 部署单页应用,刷新页面 404/502 报错

    在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...

随机推荐

  1. ESP32 BLE蓝牙 微信小程序通信发送大于20字符数据

    由于微信小程序只支持BLE每次发送数据不大于20个字节,ESP32则有经典蓝牙.低功耗蓝牙两种模式. 要解决发送数据大于20个字节的问题,最简单实用的方式就是分包发送.如下图所示: 1.什么起始字符和 ...

  2. Amazing 2020

    Amazing 2020 Intro 2020 转眼即逝,2020 是比较艰辛的一年,因为疫情原因,很多人的工作以及生活都多多少少受到了一些影响. 引用网上盛传的一句话--2020 实"鼠& ...

  3. 记一次MAVEN依赖事故

    笔者昨天遇到的背景是这样的  MAVEN A模块有一个子模块  需要依赖B模块下的一个子模块  我在B项目内通过mvn deploy上传子模块 但之后在A模块引用  怎么引用都不行  提示 org.a ...

  4. 浅谈java中异常处理

    java语言的异常捕获结构是由try.catch.finally,try中语句块是可能发生异常的java语句,catch用来激发捕获的异常,try语句块中如果发生异常,则调到catch语句块中执行ca ...

  5. Phoenix-4.14-cdh5.14.2与hbase-1.2.0-cdh5.14.2集成测试

    Phoenix介绍: 针对hbase开发的第三方插件,目前已贡献给Apache,顶级项目    Phoenix是构建在HBase上的一个SQL层  可以使用类似于操作mysql的标准sql语句,作为h ...

  6. Faceto_object_programdesign

    一面向对象程序设计思想 1 和面向过程关注点不同 过程: 程序执行流程和逻辑 (局部功能) 对象: 程序中的对象 (程序结构) 2 对象 现实世界中的实体和事物 可以看成是一种具有自身属性和功能的构件 ...

  7. go module 基本使用

    前言 go的版本以至1.13,一直以来令人诟病的依赖管理也有了官方的方向,但是看了一下目前很多blog文章还是比较老的. 所以这里对 go mod 做一个大致的说明 正文 前提 go版本为1.13及以 ...

  8. 解决Cannot find module '@angular/compiler-cli'

    前言: 今天clone之前做的一个angular项目,使用ng serve一直提示An unhandled exception occurred: Cannot find module '@angul ...

  9. 通过show status 命令了解各种sql的执行频率

    show status like 'Com_%'; Com_select                | 1   执行select操作的次数,一次查询只累加1 Com_insert         ...

  10. 【Linux】Linux进程间通信的几种方式

    一.进程间通信的目的 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几M字节之间 共享数据:多个进程要操作共享数据,一个进程对共享数据 信息传递:一个进程需要向另一个进程发 ...