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 相关文章推荐
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 Javascript
JavaScript弹窗基础篇
Apr 27 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
Jan 27 Javascript
JavaScript中将值转换为字符串的五种方法总结
Jun 06 Javascript
Vue强制组件重新渲染的方法讨论
Feb 03 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
js实现轮播图效果 纯js实现图片自动切换
Aug 09 Javascript
一起来了解一下JavaScript的预编译(小结)
Mar 01 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
apache+mysql+php+ssl服务器之完全安装攻略
2006/09/05 PHP
PHP与javascript的两种交互方式
2006/10/09 PHP
php高级编程-函数-郑阿奇
2011/07/04 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
php数组删除元素示例
2014/03/21 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
PHP中error_log()函数的使用方法
2015/01/20 PHP
PHP MySql增删改查的简单实例
2016/06/21 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
2011/01/15 Javascript
一个可拖拽列宽表格实例演示
2012/11/26 Javascript
JS实现的RGB网页颜色在线取色器完整实例
2016/12/21 Javascript
vue中多个倒计时实现代码实例
2019/03/27 Javascript
swiperjs实现导航与tab页的联动
2020/12/13 Javascript
Python判断变量是否已经定义的方法
2014/08/18 Python
Python基于Tkinter实现的记事本实例
2015/06/17 Python
python文件拆分与重组实例
2018/12/10 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
numpy.where() 用法详解
2019/05/27 Python
Python&amp;&amp;GDAL实现NDVI的计算方式
2020/01/09 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
萨克斯第五大道英国:Saks Fifth Avenue英国
2019/04/01 全球购物
J2EE相关知识面试题
2013/08/26 面试题
大学应届毕业生个人求职信
2013/09/23 职场文书
党员组织关系介绍信
2014/02/13 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
安全教育演讲稿
2014/05/09 职场文书
暑期实践个人总结
2015/03/06 职场文书
新员工试用期自我评价
2015/03/10 职场文书
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle