在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. Java 从 Redis中取出的Json字符串 带斜杠的问题解决方案

    Java 从 Redis中取出的Json字符串 带斜杠的问题: { "code": 200, "message": "成功", " ...

  2. Vue2+Koa2+Typescript前后端框架教程--05Sequelize的使用(ORM)

    本篇开始分享Node.js后端服务开发中对于数据结构ORM的实现,主要使用的技术栈是:Sequelize. 上一篇文章中讲到班级管理的数据结构:ID,班级名称,班级编码,班主任ID,使用的数据库是My ...

  3. unity 卡牌聚拢算法

    unity 卡牌聚拢算法 前言 代码 前言 笔者在做项目时遇到了一个要聚拢手牌,像三国杀里的手牌聚拢的效果 大概效果图: 代码 public Dictionary<int, int> le ...

  4. 深入浅出Dotnet Core的项目结构变化

    有时候,越是基础的东西,越是有人不明白.   前几天Review一个项目的代码,发现非常基础的内容,也会有人理解出错. 今天,就着这个点,写一下Dotnet Core的主要类型的项目结构,以及之间的转 ...

  5. db_install.rsp dbca.rsp netca.rsp 详解【转】

    db_install.rsp详解 #################################################################### ## Copyright(c ...

  6. JavaScript 获得当前日期+时间

    //直接从项目中copy出来的,亲测可用.function getTodayTime(){ var date = new Date(); var seperator1 = "-"; ...

  7. 【Java基础】IO 流

    IO 流 File 类 java.io.File 类是文件和文件目录路径的抽象表示形式,与平台无关. File 能新建.删除.重命名文件和目录,但 File 不能访问文件内容本身. 如果需要访问文件内 ...

  8. 【Dart】语言概述

    // 导入(import) // 导入核心库 //导入外部库 import 'package:test_api/test_api.dart'; // 导入文件 //import 'path/test. ...

  9. python模块详解 | selenium(持续更新中)

    目录: 关于selenium Selenium 安装Selenium 安装浏览器驱动 配置环境变量 selenium方法详解 定位元素 元素操作 浏览器操作 鼠标事件 浏览器事件 设置元素等待 多表单 ...

  10. 【Oracle】密码文件相关

    Oracle数据库的orapwd命令,主要用来建立密码(口令)文件. 一.查看帮助信息 [oracle@oracle11g dbs]$ orapwd Usage: orapwd file=<fn ...