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 相关文章推荐
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
javascript中Object使用详解
Jan 26 Javascript
jQuery插件jquery-barcode实现条码打印的方法
Nov 25 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
玩转Koa之koa-router原理解析
Dec 29 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 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
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
php.ini中date.timezone设置分析
2011/07/29 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
JavaScript观察者模式(经典)
2015/12/09 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
分享19个JavaScript 有用的简写写法
2017/07/07 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
webpack3之loader全解析
2017/10/26 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
详解微信小程序实现WebSocket心跳重连
2018/07/31 Javascript
富文本编辑器vue2-editor实现全屏功能
2019/05/26 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
[56:41]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs OG
2018/04/01 DOTA
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Python数据分析之双色球统计两个红和蓝球哪组合比例高的方法
2018/02/03 Python
Python装饰器用法实例总结
2018/02/07 Python
python实现ID3决策树算法
2018/08/29 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
Django使用 Bootstrap 样式修改书籍列表过程解析
2019/08/09 Python
Python API len函数操作过程解析
2020/03/05 Python
Pytorch自定义Dataset和DataLoader去除不存在和空数据的操作
2021/03/03 Python
宝信软件JAVA工程师面试经历
2012/08/19 面试题
信息部岗位职责
2013/11/12 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
校园招聘策划书
2014/01/09 职场文书
mysql函数之截取字符串的实现
2022/08/14 MySQL