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
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JavaScript简介
Feb 15 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
JavaScript jquery及AJAX小结
Jan 24 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
Oct 04 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
微信小程序如何使用canvas二维码保存至手机相册
Jul 15 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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应用程序来获取Web服务器的状态信息
2006/10/09 PHP
yii框架builder、update、delete使用方法
2014/04/30 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
静态页面下用javascript操作ACCESS数据库(读增改删)的代码
2007/05/14 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
jQuery实现的事件绑定功能基本示例
2017/10/11 jQuery
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
vue跳转方式(打开新页面)及传参操作示例
2020/01/26 Javascript
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python删除空文件和空文件夹的方法
2015/07/14 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
10款最好的Python开发编辑器
2019/07/03 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Pythonic版二分查找实现过程原理解析
2020/08/11 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
介绍Ibatis的核心类
2013/11/18 面试题
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
简历的自我评价范文
2014/02/04 职场文书
培训专员岗位职责
2014/02/26 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
本溪关门山导游词
2015/02/09 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
休假证明书
2015/06/24 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers