React 使用browserHistory项目访问404问题解决


Posted in Javascript onJune 01, 2018

最近项目里面用到了React但是发布到iis站点之后,路由地址 刷新访问直接404错误。查阅资料之后发现是iis缺少配置URL重写 的问题导致的。下面我们来图形化配置,简单的配置下IIS

打开IIS使用 Web平台安装程序

搜索 url 关键字,您会看到

React 使用browserHistory项目访问404问题解决 

直接安装

关掉IIS 重新打开IIS在站点右边的控制面板可以看到一个URL重写的功能

新增配置如下

React 使用browserHistory项目访问404问题解决

也可以直接 使用我的配置

配置如下 关键节点是: rewrite

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRouter" patternSyntax="ECMAScript" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{HTTP_METHOD}" pattern="^GET$" />
            <add input="{HTTP_ACCEPT}" pattern="^text/html" />
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

附:其他http-server配置说明 Nginx

server {
  server_name react.yahui.wang
  listen 80;

  root /wwwroot/ReactDemo/dist;
  index index.html;
  location / {
    try_files $uri /index.html;
  }
}

Tomcat

找到conf目录下的web.xml文件,然后加上一句话让他定位回来

<error-page>
  <error-code>404</error-code>
  <location>/index.html</location>
</error-page>

Apache

.htaccess 文件配置如下

<IfModule mod_rewrite.c>

 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteCond %{REQUEST_FILENAME} !-l
 RewriteRule . /index.html [L]

</IfModule>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
Nov 20 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
Jul 31 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
小程序实现新用户判断并跳转激活的方法
May 20 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 Javascript
可拖拽组件slider.js使用方法详解
Dec 04 Javascript
详解vue-router 命名路由和命名视图
Jun 01 #Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 #Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 #jQuery
微信小程序登录换取token的教程
May 31 #Javascript
Rollup处理并打包JS文件项目实例代码
May 31 #Javascript
手把手教你vue-cli单页到多页应用的方法
May 31 #Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 #Javascript
You might like
曾在DC漫画界反派角色扮演的演员,谁才是你心目中的小丑之王?
2020/04/09 欧美动漫
php中var_export与var_dump的区别分析
2010/08/21 PHP
JS简单实现登陆验证附效果图
2013/11/19 Javascript
js中继承的几种用法总结(apply,call,prototype)
2013/12/26 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
Position属性之relative用法
2015/12/14 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
JS高仿抛物线加入购物车特效实现代码
2017/02/20 Javascript
vue.js学习之vue-cli定制脚手架详解
2017/07/02 Javascript
js实现日期显示的一些操作(实例讲解)
2017/07/27 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
2019/08/20 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
详解Python的迭代器、生成器以及相关的itertools包
2015/04/02 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
python读取图片任意范围区域
2019/01/23 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
三万活动总结
2014/04/28 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
政协工作总结2015
2015/05/20 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang