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计算页面刷新的次数
Jul 20 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
基于Vue制作组织架构树组件
Dec 06 Javascript
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
详解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
PHP封装的非对称加密RSA算法示例
2018/05/28 PHP
javascript 主动派发事件总结
2011/08/09 Javascript
javascript权威指南 学习笔记之javascript数据类型
2011/09/24 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
jQuery实现Div拖动+键盘控制综合效果的方法
2015/03/10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
2015/04/12 Javascript
基于jquery实现简单的手风琴特效
2015/11/24 Javascript
javascript实现checkbox复选框实例代码
2016/01/10 Javascript
超链接怎么正确调用javascript函数
2016/05/23 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
Angularjs实现上传图片预览功能
2017/09/01 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
浅析Javascript中双等号(==)隐性转换机制
2017/10/27 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
bootstrap table合并行数据并居中对齐效果
2018/10/17 Javascript
ES6基础之默认参数值
2019/02/21 Javascript
JavaScript 中的无穷数(Infinity)详解
2020/02/13 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
python中的sort方法使用详解
2014/07/25 Python
python实现简单socket通信的方法
2016/04/19 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Python解决走迷宫问题算法示例
2018/07/27 Python
浅谈python之新式类
2018/08/12 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
Pytorch实现WGAN用于动漫头像生成
2021/03/04 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
财政局长自荐信范文
2013/12/22 职场文书
中学生评语大全
2014/04/18 职场文书
班风学风建设方案
2014/05/06 职场文书
篮球社团活动总结
2014/06/27 职场文书
2019假期福利管理制度!
2019/07/15 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS