如何使用 IIS 设置 react-router 干净的 URL？

Question

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

Answer 1

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

1. 在您的服务器上下载并安装URL Rewrite （开发和生产）

2. 设置规则以捕获任何不是文件和不是目录的 url 路由。 或者，您可以否定要定期提供的任何实际目录。 更多信息可以在这里找到Microsoft 的文档

    <?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>

3. 在您的基本 html 页面 (index.html) 中，向您的应用添加带有href属性的<base/>标记。

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

Answer 2

只是建立在这个答案的基础上，供任何感兴趣的人使用。 如果您喜欢我并且需要通过脚本部署您的应用程序。 以下是创建上述 webconfiguration 所需的 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 的标题中使用 base 标记时遇到了一些麻烦。 这个链接相当有帮助。

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}>
 ....