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 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Javascript 陷阱 window全局对象
Nov 26 Javascript
js 深拷贝函数
Dec 04 Javascript
jquery根据name属性查找的小例子
Nov 21 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
理解javascript对象继承
Apr 17 Javascript
一览画面点击复选框后获取多个id值的方法
May 30 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
javascript中数组和字符串的方法对比
Jul 20 Javascript
layui的面包屑或者表单不显示的解决方法
Sep 05 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
symfony表单与页面实现技巧
2015/01/26 PHP
typecho插件编写教程(四):插件挂载
2015/05/28 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
Convert Seconds To Hours
2007/06/16 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
javascript数组详解
2014/10/22 Javascript
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
2015/09/12 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
D3.js中强制异步文件读取同步的几种方法
2017/02/06 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
js中url对象化管理分析
2017/12/29 Javascript
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
Javascript 类型转换、封闭函数及常见内置对象操作示例
2019/11/15 Javascript
详解Vue中的MVVM原理和实现方法
2020/07/15 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
深入浅析Python的类
2018/06/22 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
Windows 下python3.8环境安装教程图文详解
2020/03/11 Python
简单了解python列表和元组的区别
2020/05/14 Python
opencv 阈值分割的具体使用
2020/07/08 Python
美国购买和销售礼品卡平台:Raise
2017/01/13 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
品恩科技软件测试面试题
2014/10/26 面试题
生日邀请函范文
2014/01/13 职场文书
会计专业自我鉴定
2014/02/10 职场文书
乔迁之喜主持词
2014/03/27 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
银行稽核岗位职责
2015/04/13 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python