前端解决:

  • '/' 表示把所有的url都发给代理https://api.example.com
  • bypass 表示不需要发给发给代理服务器的条件

  如下配置,可以监听https://api.example.com域下的/开头的请求(等效于所有请求),然后判断请求头中accept字段是否包含html,若包含,则代理请求至/index.html,随后将返回index.html文档至浏览器。

proxy: {
'/': {
target: 'https://api.example.com',
secure: false,
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}

django后端解决

对于所有后端不存在的url直接返回index.html文档给浏览器

handler404 = view.page_not_found

# 强制刷新前端功能
def page_not_found(request, exception, template_name='index.html'):
return render(request, template_name)

参考:

http://blog.codingplayboy.com/2017/12/26/react-router-browserhistory-404/

react-router的browserHistory/react-router-dom的BrowserRouter刷新页面404问题解决的更多相关文章

  1. React学习(3)——Router路由的使用和页面跳转

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

  2. React 实践记录 03 React router

    Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...

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

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

  4. 从 0 到 1 实现 React 系列 —— 1.JSX 和 Virtual DOM

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  5. React: 有状态组件生成真实DOM结点

    上次我们分析了无状态组件生成 DOM 的过程,无状态组件其实就是纯函数,它不维护内部的状态,只是根据外部输入,输出一份视图数据.而今天我们介绍的有状态组件,它有内部的状态,因此在组件的内部,可以自行对 ...

  6. React: 无状态组件生成真实DOM结点

    在上一篇文章中,我们总结并模拟了 JSX 生成真实 DOM 结点的过程,今天接着来介绍一下无状态组件的生成过程. 先以下面一段简单的代码举例: const Greeting = function ({ ...

  7. [React] 02 - Intro: why react and its design pattern

    为啥使用React,给我个理由 过去 需要手动更新DOM.费力地记录每一个状态:既不具备扩展性,又很难加入新的功能,就算可以,也是有着冒着很大的风险. 不过,使用这种开发方式很难打造出极佳的用户体验. ...

  8. react基础学习和react服务端渲染框架next.js踩坑

    说明 React作为Facebook 内部开发 Instagram 的项目中,是一个用来构建用户界面的优秀 JS 库,于 2013 年 5 月开源.作为前端的三大框架之一,React的应用可以说是非常 ...

  9. 【React】- 1、React介绍

    React的开发背景 构建数据不断变化的大型应用 大量DOM操作   <----   自动DOM操作 数据变化 逻辑及其复杂   <----   状态对应内容(自动变化) 特点: - 简单 ...

随机推荐

  1. word2013 如何设置从第三页开始编码 或 如何设置封面页和正文页页码不连续

    首先说明一下 “分节符”作用,它就是用来将整个文档分节的,添加一个分节符,文档就分成1.2两节:添加两个分节符,文档就分成1.2.3节. 当前页面具体是第几节,可以通过点击页眉页脚来查看: 从第三页开 ...

  2. 005.KVM日常管理2-virt管理

    一 安装管理工具 [root@kvm-host ~]# rpm -qa|grep libguestfs-tools #查看相关管理工具,若没安装,可使用yum安装.   二 日常管理 2.1 命令格式 ...

  3. 001.DNS原理及配置格式

    一 dns简介 DNS(Domain Name System,域名系统),因特网上作为域名和IP地址相互映射的一个分布式数据库,能够使用户更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串. ...

  4. 利用transform的bug使fixed相对于父级定位

    首先,大家都清楚,元素使用fixed之后,若不设置top与left则会相对于最近的使用定位的父元素,并位于父元素的原点位置设置top与left值时,则会相对于窗口定位.但无论如何,此时仍相对于窗口定位 ...

  5. linux Shell 脚本编写

    1. http://www.jb51.net/article/28514.htm 2. http://www.runoob.com/linux/linux-shell.html

  6. python文件相关操作

    Python文件相关操作 打开文件 打开文件,采用open方法,会将文件的句柄返回,如下: f = open('test_file.txt','r',encoding='utf-8') 在上面的代码中 ...

  7. BZOJ.4695.最假女选手(线段树 Segment tree Beats!)

    题目链接 区间取\(\max,\ \min\)并维护区间和是普通线段树无法处理的. 对于操作二,维护区间最小值\(mn\).最小值个数\(t\).严格次小值\(se\). 当\(mn\geq x\)时 ...

  8. j.u.c系列(05)---之重入锁:ReentrantLock

    写在前面 ReentrantLock,可重入锁,是一种递归无阻塞的同步机制.它可以等同于synchronized的使用,但是ReentrantLock提供了比synchronized更强大.灵活的锁机 ...

  9. 关于tensorflow中tensorborad No dashboards are active for the current data set.的解决办法

    说明:这个问题,困惑了好久,在网上查了很久,一直没能解决,直到我在stackoverflow上看到有一位博主的回答 链接在这里:(https://stackoverflow.com/questions ...

  10. API测试利器postMan 使用教程

    自从开始做API开发之后,我就在寻找合适的API测试工具.一开始不是很想用Chrome扩展,用的 WizTools 的工具,后来试过一次 Postman 之后就停不下来了,还买了付费的Jetpacks ...