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 EXCEL 操作类代码
Jul 30 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
JavaScript中的console.time()函数详细介绍
Dec 29 Javascript
JavaScript原生对象之Number对象的属性和方法详解
Mar 13 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
JavaScript 异步调用
Oct 25 Javascript
webpack配置导致字体图标无法显示的解决方法
Mar 06 Javascript
js事件on动态绑定数据,绑定多个事件的方法
Sep 15 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
详解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 向右侧拉菜单实现代码,测试使用中
2009/11/03 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
JQuery插件开发示例代码
2013/11/06 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
JQuery选择器绑定事件及修改内容的方法
2015/01/23 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
详解vuex的简单使用
2018/03/12 Javascript
详解vue 单页应用(spa)前端路由实现原理
2018/04/04 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python使用thrift教程的方法示例
2019/03/21 Python
使用keras根据层名称来初始化网络
2020/05/21 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
实习鉴定评语
2014/01/19 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
毕业留言寄语大全
2014/04/10 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
节约能源标语
2014/06/17 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
交警失职检讨书
2015/01/26 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python