• React 使用browserHistory项目访问404问题


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

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

    搜索url关键字,您会看到

    React-Router-browserHistory-IIS-2018518104435
    直接安装

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

    新增配置如下

    React-Router-browserHistory-IIS-2018518104817

    也可以直接 使用我的配置

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

  • 相关阅读:
    copy深浅拷贝
    def函数
    内置函数
    for / while 循环
    报告的实现
    运行用例
    集合获取依赖用例
    解决依赖关系(单层和递归两种方式)、获取依赖用例去运行
    接口测试平台开发之接口开发(用例集合)
    接口测试平台开发之接口开发(项目管理、接口管理、用例管理)
  • 原文地址:https://www.cnblogs.com/YahuiWang/p/React-Router-browserHistory-IIS.html
Copyright © 2020-2023  润新知