最近项目里面用到了React但是发布到iis站点之后,路由地址 刷新访问直接404错误。查阅资料之后发现是iis缺少配置URL重写 的问题导致的。下面我们来图形化配置,简单的配置下IIS

打开IIS使用 Web平台安装程序

搜索url关键字,您会看到



直接安装

关掉IIS 重新打开IIS在站点右边的控制面板可以看到一个URL重写的功能

新增配置如下

也可以直接 使用我的配置

配置如下 关键节点是: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>

转载请注明出处 http://blog.yahui.wang/2018/05/18/React-Router-browserHistory-IIS/

React 使用browserHistory项目访问404问题的更多相关文章

  1. idea启动springboot+jsp项目出现404

    场景:用IntelliJ IDEA 启动 springBoot项目访问出现404,很皮,因为我用eclipse开发时都是正常的,找了很久,什么加注释掉<scope>provided< ...

  2. .net MVC 访问404

    MVC 项目访问总是404 有几种情况: 1 地址打错了. 2 controller/action  但是action方法含有[ActionName("Index")] 重命名了. ...

  3. IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404

    IntelliJ IDEA+SpringBoot中静态资源访问路径陷阱:静态资源访问404 .embody{ padding:10px 10px 10px; margin:0 -20px; borde ...

  4. react axios 跨域访问一个或多个域名

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo ...

  5. nginx反向代理部署springboot项目报404无法加载静态资源

    问题:nginx反向代理部署springboot项目报404无法加载静态资源(css,js,jpg,png...) springboot默认启动端口为8080,如果需要通过域名(不加端口号)直接访问s ...

  6. web理论知识--网页访问过程(附有Django的web项目访问流程)

    当我们闲暇之余想上网看看新闻,或者看个电影,通常的操作是:打开电脑.打开浏览器.输入网址.浏览页面信息.点击自己感兴趣的连接......那么有没有想过,这些网页从哪里来的?过程中计算机又做了什么事情了 ...

  7. React脚手架创建一个React应用以及项目目录结构详解

    react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...

  8. tomcat部署项目访问不加项目名方法

    直接主题:tomcat部署项目访问不加项目名方法是打开tomcat的conf目录下server.xml文件 加入 <Context path="" docBase=" ...

  9. django之创建第4-3个项目-访问list数据

    1.index <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

随机推荐

  1. 【转】 Pro Android学习笔记(九七):BroadcastReceiver(1):基础小例子

    目录(?)[-] 基础小例子 发送Broadcast intent 运行情况 应用间的广播 文章转载只能用于非商业性质,且不能带有虚拟货币.积分.注册等附加条件.转载须注明出处:http://blog ...

  2. 1146 Topological Order

    题意:判断序列是否为拓扑序列. 思路:理解什么是拓扑排序就好了,简单题.需要注意的地方就是,因为这里要判断多个,每次判断都会改变入度indegree[],因此记得要把indegree[]留个备份.ps ...

  3. android欢迎页

    在进入程序后,会在一个页面停留几秒然后自动跳转到程序主界面,这个页面就是欢迎页. 首先新建个java文件,给他起名叫做WelcomeActivity 在里面我们通过一个匿名类new Handler,在 ...

  4. PyCharm中按住Alt键,可以选择一个指定列表,然后对这个数列进行操作,比如删除,增加等等

  5. mysql 常见参数

    my.cnf[client] 对mysql的所有客端都生效的[mysql] 只对mysql这个命令有效了[mysqd][mysqld_multi] 多实例启动[mysqld_safe][mysqldN ...

  6. ansible安装配置zabbix客户端

     安装软件 ansible host -m apt -a "name=zabbix-agent state=present" ansible host -m shell -a ...

  7. dd命令的解释

    dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. if=文件名:输入 ...

  8. python‘s tenth day for me

    动态参数    *args   **kwargs   *args  动态参数,万能参数 # args 接受的就是实参对应的  所有位置参数,并将其放在元祖中. def func(*args): pri ...

  9. 进程间通信___命名管道(FIFO)

    命名管道(FIFO) 基本概念 命名管道和一般的管道基本相同,但也有一些显著的不同: 命名管道是在文件系统中作为一个特殊的设备文件而存在的. 不同祖先的进程之间可以通过管道共享数据. 当共享管道的进程 ...

  10. Theos简介

    [Theos简介] Theos is a cross-platform suite of development tools for managing, developing, and deployi ...