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实现单页面应用路由 这 ...
随机推荐
- Eclipse怎么样添加智能感知提示功能(含Windows版和Mac版)
近日感兴趣于安卓,开始学习Android开发……第一次使用Eclipse,用久了VS,也习惯了他的智能提示,刚转到Eclipse下实在是不习惯…… 网上有人说按Alt + / 可以实现单词补全功能,实 ...
- StreamSets学习系列之StreamSets的集群安装(图文详解)
不多说,直接上干货! 若是集群安装 需要在对应节点执行相同的操作. 见 StreamSets学习系列之StreamSets支持多种安装方式[Core Tarball.Cloudera Parcel . ...
- Maven启用代理服务器访问
0.什么叫代理服务器? 代理服务器英文全称是(Proxy Server),其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转站. 代理服务器就好象一个大的Cache,这样就能显著提高浏 ...
- Node.js 安装及环境配置之 Windows 篇
一.安装环境 1.本机系统:Windows 10 企业版(64位)2.Node.js:node-v8.9.4-x64.msi(64位) 二.安装Node.js步骤 1.下载对应自己系统对应的 Node ...
- Chapter 3 Phenomenon——19
His unfriendliness intimidated me. 他的不友好恐吓到了我. My words came out with less severity than I'd intende ...
- MYSQL查询语句大全集锦
MYSQL查询语句大全集锦 1:使用SHOW语句找出在服务器上当前存在什么数据库: mysql> SHOW DATABASES; 2:2.创建一个数据库MYSQLDATA mysql> C ...
- Python虚拟环境工具-Virtualenv 介绍及部署记录
在开发Python应用程序时,系统默认的Python版本可能会不兼容这个应用程序, 如果同时开发多个应用程序, 可能会用到好几个版本的python环境, 这种情况下,每个应用可能需要各自拥有一套&qu ...
- c语言-遍历pci设备(2)mmio访问
前言 今天其实我在公司也没有做什么,但是昨天就把pcie遍历的mmio形式做了出来,赞扬公司的台湾服务器,至少我可以使用google来去搜索我想要的资料和答案,有一位大神在台湾的论坛上发布了一片博文, ...
- T4模板根据数据库表和列的Description生成代码的summary的终极解决方案
相信很多人都用T4模版生成代码,用T4模版生成标准代码真的很方便.我们经常根据表生成相关的代码, 但是估计很多人都遇见过同一个问题, 特别是我们在生成model的时候,代码中model中的Summar ...
- .5-浅析webpack源码之入口函数
从convert-argv出来后,目前进度在这: yargs.parse(process.argv.slice(2), (err, argv, output) => { // ... // 从这 ...