如何使用IIS设置react-router clean URL? [英] How do I setup react-router clean URL's with IIS?

查看:671
本文介绍了如何使用IIS设置react-router clean URL?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

React-Router 可让您的ReactJS应用程序通过简单的路由组件成为SPA。部署到IIS时,使用bashHistory进行设置时一切正常。但是,当我尝试使用browserHistory时,IIS正在尝试返回一个目录,而不是允许React-Router抓取并解析该路由。如何设置React-Router在IIS环境中工作?

React-Router enables your ReactJS app to become a SPA through simple routing components. When deploying to IIS, everything works fine when setup using bashHistory. However, when I try to use browserHistory, IIS is trying to return a directory instead of allowing React-Router to grab and resolve the route. How do I setup React-Router to work in an IIS environment?

推荐答案

使React-Router与IIS协同工作的关键是设置URL重写规则。在查看其他人如何使用IIS设置AngularJS SPA应用程序后,我提出了以下解决方案。

The key to getting React-Router to work with IIS is to setup URL Rewrite rules. After looking at how some others have setup AngularJS SPA apps with IIS, I have come up with the following solution.


  1. 下载和在您的服务器上安装 URL Rewrite (开发和制作)

设置规则以捕获任何不是文件且不是目录的URL路由。 (可选)您可以否定要定期提供的任何实际目录。有关详细信息,请参见 Microsoft的文档

Setup rule to catch any url routes that ARE NOT files and ARE NOT directories. Optionally, you can negate any actual directories that you want serve regularly. More info can be found here on Microsoft's Documentation

<?xml version =1.0encoding =UTF-8?>
< configuration>
< system.webServer>
< rewrite>
< rules>
< rule name =ReactRouter RoutesstopProcessing =true>
< match url =。*/>
< conditions logicalGrouping =MatchAll>
< add input ={REQUEST_FILENAME}matchType =IsFilenegate =true/>
< add input ={REQUEST_FILENAME}matchType =IsDirectorynegate =true/>
< add input ={REQUEST_URI}pattern =^ /(docs)negate =true/>
< / conditions>
< action type =Rewriteurl =index.html/>
< / rule>
< / rules>
< / rewrite>
< /system.webServer>
< / configuration>

在您的基本html页面(index.html)中添加< base /> 标记,并为您的应用添加 href 属性。

In your base html page (index.html) add a <base/> tag with a href attribute to your app.

< base href ='/ path / to / my / app'/>

这篇关于如何使用IIS设置react-router clean URL?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆