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编程起步(第二课)
Jan 10 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
小程序分页实践之编写可复用分页组件
Jul 18 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
vue3.0中使用postcss-pxtorem的具体方法
Nov 20 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
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
Laravel实现autoload方法详解
2017/05/07 PHP
json中换行符的处理方法示例介绍
2014/06/10 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
浅析JavaScript中的事件机制
2015/06/04 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
JS中动态创建元素的三种方法总结(推荐)
2016/10/20 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
no-vnc和node.js实现web远程桌面的完整步骤
2019/08/11 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
js实现图片跟随鼠标移动效果
2019/10/16 Javascript
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
opencv实现简单人脸识别
2021/02/19 Python
Python搭建代理IP池实现检测IP的方法
2019/10/27 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
使用Python Tkinter实现剪刀石头布小游戏功能
2020/10/23 Python
使用phonegap播放音频的实现方法
2017/03/31 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
毕业生就业自荐信
2013/12/04 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
机关班子查摆问题及整改措施
2014/10/28 职场文书
保留意见审计报告
2015/06/05 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
Python安装使用Scrapy框架
2022/04/12 Python