react单页面应用的Nginx配置问题
项目中多数使用react单页面开发,路由使用react-router的browser-router,这样页面访问路径看起来像是真实的,如http://xx.xxx.xxx/a/b。但当项目访问路径为多级时,直接输入地址或刷新会报404。这是因为服务器会将其当做真实的路径去请求页面,但实际这个页面是不存在的,所以会报404错误。解决方法是让其请求到项目入口页面,由js去处理路由加载响应模块。
假如项目为A,入口文件为A/view/index.html,访问地址如 http://test.x431.com/A/view/login。在Nginx加如下配置。
location ~* view {
rewrite (.+)/view/(.+)$ $/view/index.html break;
}
参考文档:
http://nphard.me/2016/03/07/nginx-for-react/
http://www.cnblogs.com/feiyuanxing/p/4668818.html
react单页面应用的Nginx配置问题的更多相关文章
- 【重点突破】—— 百度地图在React单页面应用中的使用
前言:百度地图是网页中使用地图的常用第三方工具,这里结合React项目中学到的应用场景总结一些使用要点. 一.在网页中嵌入百度地图 搜百度地图开放平台,注册百度开发者账号 控制台:查看应用.创建应用( ...
- React单页面应用使用antd的锚点跳转失效
首先在react项目中引用antd的锚点 import {Anchor} from 'antd';const { Link } = Anchor; <Anchor> <Link hr ...
- react用脚手架创建一个react单页面项目,react起手式
官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10 npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...
- HBuilder打包React单页面,Android返回功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- vue,react,angular本地配置nginx 环境单页面应用
一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...
- Nginx 解决WebApi跨域二次请求以及Vue单页面问题
一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...
- Nginx配置Web项目(多页面应用,单页面应用)
目前前端项目 可分两种: 多页面应用,单页面应用. 单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM. 多页面应用 是由多个html文件组成,浏览器访问的是对应服务 ...
- webpack+react+antd 单页面应用实例
React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...
- 优化单页面开发环境:webpack与react的运行时打包与热更新
前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...
随机推荐
- ORACLE数据库表解锁record is locked by another user
出现此问题多由于操作Oracle执行完,没有COMMIT,直接把PL/SQL关闭掉,后来导致那张表被锁住,当编辑时就会出现这个信息,record is locked by another user! ...
- 使用binlog2sql针对mysql进行数据恢复
MySQL闪回原理与实战 DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法 ...
- Error:Could not determine the class-path for interface com.android.builder.model.AndroidProject.
Android Studio导入Eclipse项目报错Error:Could not determine the class-path for interface com.android.builde ...
- Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题
Dubbo源码学习--优雅停机原理及在SpringBoot中遇到的问题 相关文章: Dubbo源码学习文章目录 前言 主要是前一阵子换了工作,第一个任务就是解决目前团队在 Dubbo 停机时产生的问题 ...
- SVN安装后,右键不显示SVN菜单项
打开svn->setting对话框,找到Icon Overlays, show overlays and context menu only explorer当中显示, 重启电脑.配置如下所示:
- Netty——高级内置解码器、编码器、ByteBuf
netty通讯需要对数据进行编码,解码,于是我们需要用到netty的编码器.解码器 netty 提供的解码器 DelimiterBasedFrameDecoder 解决TCP的粘包解码器 Stri ...
- 一行一行读Java源码——LinkedBlockingQueue
1.LinkedBlockingQueue概述 Linked:链表+Blocking:阻塞+Queue:队列 Queue:首先想到的是FIFO Linked:,Queue:其结构本质上是线性表,可以有 ...
- Tomcat学习总结(8)——Tomcat+Nginx集群解决均衡负载及生产环境热部署
近日,为解决生产环境热部署问题,决定在服务器中增加一个tomcat组成集群,利用集群解决热部署问题. 这样既能解决高并发瓶颈问题,又能解决热部署(不影响用户使用的情况下平滑更新生产服务器)问题. 因为 ...
- mysqldump 用法
mysqldump 是文本备份还是二进制备份 它是文本备份,如果你打开备份文件你将看到所有的语句,可以用于重新创建表和对象.它也有 insert 语句来使用数据构成表. mysqldump 的语法是什 ...
- [转]web打印实现方案 Lodop6.034 使用方法总结
本文转自:https://www.cnblogs.com/tiger8000/archive/2011/09/19/2181365.html 官文下载: http://mtsoftware.v053. ...