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 tips提示效果
Apr 03 Javascript
浅析Prototype的模板类 Template
Dec 07 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Webpack 实现 Node.js 代码热替换
Oct 22 Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
vue select选择框数据变化监听方法
Aug 24 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
May 29 Javascript
vue实现扫码功能
Jan 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
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
php投票系统之增加与删除投票(管理员篇)
2016/07/01 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
laravel框架邮箱认证实现方法详解
2019/11/22 PHP
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
jQuery滚动加载图片实现原理
2015/12/14 Javascript
js获取及修改网页背景色和字体色的方法
2015/12/29 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Java里面有没有全局变量?为什么?
2015/02/06 面试题
质检部职责
2013/12/28 职场文书
青年创业培训欢迎词
2014/01/08 职场文书
大学生村官典型材料
2014/01/12 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
搞笑创意广告语
2014/03/17 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
2014年领班工作总结
2014/11/25 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
小学生通知书评语
2014/12/31 职场文书
浅谈Python数学建模之数据导入
2021/06/23 Python
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python