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 相关文章推荐
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
Java中Timer的用法详解
Oct 21 Javascript
理解JavaScript事件对象
Jan 25 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
微信小程序 Toast自定义实例详解
Jan 20 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 Javascript
JS中Safari浏览器中的Date
Jul 17 Javascript
微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动,右侧滑动)
Jan 23 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
Nov 06 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中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP单例模式定义与使用实例详解
2017/02/06 PHP
javascript学习笔记--数字格式类型
2014/05/22 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
js电话号码验证方法
2015/09/28 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
基于 webpack2 实现的多入口项目脚手架详解
2017/06/26 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
node.js express框架实现文件上传与下载功能实例详解
2019/10/15 Javascript
原生javascript制作的拼图游戏实现方法详解
2020/02/23 Javascript
jQuery实现鼠标拖拽登录框移动效果
2020/09/13 jQuery
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
python 基础教程之Map使用方法
2017/01/17 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python3 实现文件批量重命名示例代码
2019/06/03 Python
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
简述使用ftp进行文件传输时的两种登录方式?它们的区别是什么?常用的ftp文件传输命令是什么?
2016/11/20 面试题
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
《月光启蒙》教学反思
2014/03/01 职场文书
小学语文教研活动总结
2014/07/01 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
公司财务会计主管应聘求职信
2014/09/26 职场文书
2014年建筑工作总结
2014/11/26 职场文书
财政局个人年终总结
2015/03/03 职场文书
写给导师的自荐信
2015/03/06 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python