项目中多数使用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配置问题的更多相关文章

  1. 【重点突破】—— 百度地图在React单页面应用中的使用

    前言:百度地图是网页中使用地图的常用第三方工具,这里结合React项目中学到的应用场景总结一些使用要点. 一.在网页中嵌入百度地图 搜百度地图开放平台,注册百度开发者账号 控制台:查看应用.创建应用( ...

  2. React单页面应用使用antd的锚点跳转失效

    首先在react项目中引用antd的锚点 import {Anchor} from 'antd';const { Link } = Anchor; <Anchor> <Link hr ...

  3. react用脚手架创建一个react单页面项目,react起手式

    官网地址:https://react.docschina.org/ 确保本地安装了Node.js node的版本大于8.10    npm的版本大于5.6 1.在本地的某个位置创建一个文件夹,执行以下 ...

  4. HBuilder打包React单页面,Android返回功能

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  5. vue,react,angular本地配置nginx 环境单页面应用

    一.起因:项目使用VUE,和react.构建单页面应用.在nginx的环境下只有一个index.html入口.这时候默认能够访问到vue,和react 路由 配置中的首页.内部连接也能够跳转但是不能给 ...

  6. Nginx 解决WebApi跨域二次请求以及Vue单页面问题

    一.前言 由于项目是前后端分离,API接口与Web前端 部署在不同站点当中,因此在前文当中WebApi Ajax 跨域请求解决方法(CORS实现)使用跨域处理方式处理而不用Jsonp的方式. 但是在一 ...

  7. Nginx配置Web项目(多页面应用,单页面应用)

    目前前端项目 可分两种: 多页面应用,单页面应用. 单页面应用 入口是一个html文件,页面路由由js控制,动态往html页面插入DOM. 多页面应用 是由多个html文件组成,浏览器访问的是对应服务 ...

  8. webpack+react+antd 单页面应用实例

    React框架已经火了好长一段时间了,再不学就out了! 对React还没有了解的同学可以看看我之前的一篇文章,可以快速简单的认识一下React.React入门最好的实例-TodoList 自己从开始 ...

  9. 优化单页面开发环境:webpack与react的运行时打包与热更新

    前面两篇文章介绍初步搭建单页面应用的开发环境: 第一篇:使用webpack.babel.react.antdesign配置单页面应用开发环境 第二篇:使用react-router实现单页面应用路由 这 ...

随机推荐

  1. 02-04:springboot 访问静态资源

    1.SpringBoot从classpath/static的目录下:(目录名称必须叫static,可以理解为根目录为static) 2.servletContext根目录下,进行查找: 在src/ma ...

  2. Python基础之好玩的字符串格式化f-string格式

    转自白月黑羽 Python3教程 : http://www.python3.vip/doc/tutorial/python/0010/#f-string-格式化 f-string 格式化 f-stri ...

  3. JavaScript初探四

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 轻量级web富文本框——wangEditor使用手册(1)——基本应用 demo

    最新版wangEditor: 配置说明:http://www.wangeditor.com/doc.html demo演示:http://www.wangeditor.com/wangEditor/d ...

  5. 在Hadoop 2.3上运行C++程序各种疑难杂症(Hadoop Pipes选择、错误集锦、Hadoop2.3编译等)

    首记 感觉Hadoop是一个坑,打着大数据最佳解决方案的旗帜到处坑害良民.记得以前看过一篇文章,说1TB以下的数据就不要用Hadoop了,体现不 出太大的优势,有时候反而会成为累赘.因此Hadoop的 ...

  6. es-01-简介

    1, 基于lucene的实时搜索软件 分布式的restful风格的搜索和数据分析引擎, 2, 和kibana, logstash 构成 elk生态圈 es: 数据存储和查询 kibana: 可视化 l ...

  7. lucene 初探

    前言: window文件管理右上角, 有个搜索功能, 可以根据文件名进行搜索. 那如果从文件名上判断不出内容, 我岂不是要一个一个的打开文件, 查看文件的内容, 去判断是否是我要的文件? 几个, 十几 ...

  8. 微信小程序开发语言的选择

    微信使用的开发语言和文件很「特殊」. 小程序所使用的程序文件类型大致分为以下几种: ①WXML(WeiXin Mark Language,微信标记语言) ②WXSS(WeiXin Style Shee ...

  9. Java NIO系列教程(三) Buffer

    Java NIO中的Buffer用于和NIO通道进行交互.如你所知,数据是从通道读入缓冲区,从缓冲区写入到通道中的.交互图如下: 缓冲区本质上是一块可以写入数据,然后可以从中读取数据的内存.这块内存被 ...

  10. 小程序获取view元素的高度

    页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> < ...