Question

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

Answer 1

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

在您的服务器上下载并安装--color=auto（开发和制作）
设置规则以捕获任何不是文件且不是目录的URL路由。（可选）您可以否定要定期提供的任何实际目录。更多信息可以在URL Rewrite
上找到
PS1
在您的基本html页面（index.html）中，为您的应用添加<?xml version="1.0" encoding="UTF-8"?> <configuration> <system.webServer> <rewrite> <rules> <rule name="ReactRouter Routes" stopProcessing="true"> <match url=".*" /> <conditions logicalGrouping="MatchAll"> <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" /> </conditions> <action type="Rewrite" url="index.html" /> </rule> </rules> </rewrite> </system.webServer> </configuration>个<base/>属性标记。

href

Answer 2

为所有感兴趣的人提供这个答案。如果您喜欢我并需要通过脚本部署您的应用程序。以下是创建上述Web配置所需的powershell脚本。

这会在服务器上安装URL Rewrite。

    #Install IIS UrlRewrite
    If(Test-Path c:/msi) {
    Invoke-WebRequest 'http://download.microsoft.com/download/C/F/F/CFF3A0B8-99D4-41A2-AE1A-496C08BEB904/WebPlatformInstaller_amd64_en-US.msi' -OutFile c:/msi/WebPlatformInstaller_amd64_en-US.msi
    Start-Process 'c:/msi/WebPlatformInstaller_amd64_en-US.msi' '/qn' -PassThru | Wait-Process
    cd 'C:/Program Files/Microsoft/Web Platform Installer'; .\WebpiCmd.exe /Install /Products:'UrlRewrite2,ARRv3_0' /AcceptEULA /Log:c:/msi/WebpiCmd.log
    }
    else {
    New-Item c:/msi -ItemType Directory
    Invoke-WebRequest 'http://download.microsoft.com/download/C/F/F/CFF3A0B8-99D4-41A2-AE1A-496C08BEB904/WebPlatformInstaller_amd64_en-US.msi' -OutFile c:/msi/WebPlatformInstaller_amd64_en-US.msi
    Start-Process 'c:/msi/WebPlatformInstaller_amd64_en-US.msi' '/qn' -PassThru | Wait-Process
    cd 'C:/Program Files/Microsoft/Web Platform Installer'; .\WebpiCmd.exe /Install /Products:'UrlRewrite2,ARRv3_0' /AcceptEULA /Log:c:/msi/WebpiCmd.log
    }

以下是添加规则的方法。

Add-WebConfigurationProperty -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules" -name "." -value @{name='Home';stopProcessing='True'}
Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite"  -filter "system.webServer/rewrite/rules/rule/match" -name "url" -value ".*"

Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_FILENAME}"; matchType="IsFile"; negate="true" }
Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_FILENAME}"; matchType="IsDirectory"; negate="true" }
Add-WebConfiguration -pspath "$IISPath\MyWebsite" -filter "system.webServer/rewrite/rules/rule[@name='Home']/conditions" -value @{ input="{REQUEST_URI}"; pattern="^/(docs)"; negate="true" }

Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite"  -filter "system.webServer/rewrite/rules/rule/action" -name "type" -value "Rewrite" 
Set-WebConfigurationProperty -pspath "$IISPath\MyWebsite"  -filter "system.webServer/rewrite/rules/rule/action" -name "url" -value "index.html"

这些脚本可以通过Powershell中的Invoke-Command在本地或远程执行。

此外，我在使用React Router警告时遇到了一些问题，并且在index.html的标头中使用了基本标记。这个链接非常有帮助。

https://github.com/ReactTraining/react-router/issues/4006

我基本上将我的React-Router软件包和History软件包更改为3.x版，并在我的路由器中设置配置以消除弃用警告。这是我现在的反应路由器。

import { useRouterHistory } from 'react-router'
import { createHistory } from 'history'

const history = useRouterHistory(createHistory)({
basename: '/base-path'
})

ReactDOM.render(
  <Router history={history}>
 ....

如何使用IIS设置react-router clean URL？

2 个答案: