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学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
JavaScript字符串插入、删除、替换函数使用示例
Jul 25 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jquery实现经典的淡入淡出选项卡效果代码
Sep 22 Javascript
利用JQuery写一个简单的异步分页插件
Mar 07 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
Jun 07 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
详解angular应用容器化部署
Aug 14 Javascript
elementUI select组件使用及注意事项详解
May 29 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 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
蝙蝠侠:侠影之谜
2020/03/04 欧美动漫
用windows下编译过的eAccelerator for PHP 5.1.6实现php加速的使用方法
2007/09/30 PHP
php 字符转义 注意事项
2009/05/27 PHP
深入分析php之面向对象
2013/05/15 PHP
php模板原理讲解
2013/11/13 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php读取txt文件并将数据插入到数据库
2016/02/23 PHP
php实现连接access数据库并转txt写入的方法
2017/02/08 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
图片上传即时显示缩略图的js代码
2009/05/27 Javascript
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
移动端js图片查看器
2016/11/17 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
2018/08/28 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
网管求职信
2014/03/03 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
国庆庆典邀请函
2015/02/02 职场文书
总经理岗位职责
2015/02/04 职场文书
Go语言中的UTF-8实现
2021/04/26 Golang
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL
Django使用redis配置缓存的方法
2021/06/01 Redis
用python修改excel表某一列内容的操作方法
2021/06/11 Python
Redis 异步机制
2022/05/15 Redis