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 相关文章推荐
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
JavaScript prototype属性使用说明
May 13 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
20170918 前端开发周报之JS前端开发必看
Sep 18 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
JavaScript使用canvas绘制随机验证码
Feb 17 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
提高网站信任度的技巧
2008/10/17 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JQuery的ajax获取数据后的处理总结(html,xml,json)
2010/07/14 Javascript
客户端限制只能上传jpg格式图片的js代码
2010/12/09 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
js图片翻书效果代码分享
2015/08/20 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
JSON对象 详解及实例代码
2016/10/18 Javascript
node.js的事件机制
2017/02/08 Javascript
Vue实现自带的过滤器实例
2017/03/09 Javascript
Vue中img的src属性绑定与static文件夹实例
2017/05/18 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
JavaScript实现图片放大镜效果
2019/06/27 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python实现二叉树前序、中序、后序及层次遍历示例代码
2019/05/18 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Tensorflow设置显存自适应,显存比例的操作
2020/02/03 Python
对tensorflow 中tile函数的使用详解
2020/02/07 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python如何读取、写入CSV数据
2020/07/28 Python
python计算auc的方法
2020/09/09 Python
白兰氏健康Mall:BRAND’S
2017/11/13 全球购物
药学专业大学生个人的自我评价
2013/11/04 职场文书
医学专业毕业生个人求职信
2013/12/25 职场文书
转党组织关系介绍信
2014/01/08 职场文书
二手房购房意向书范本
2014/04/01 职场文书
战略合作意向书
2014/07/29 职场文书
成本会计实训报告
2014/11/05 职场文书
基石观后感
2015/06/12 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书