如何在IIS中設置react-router clean 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. 服務器（開發和生產）

2. 設置規則趕上那不是文件，而不是目錄中的任何URL路徑上

   下載並安裝URL Rewrite。或者，您可以否定任何您想要定期發送的實際目錄。更多信息可以在這裏找到在Microsoft's Documentation

   <?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的）添加<base/>標籤與href屬性應用程式。

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

Answer 2

只是建立在這個答案的人感興趣。如果你喜歡我，並需要通過腳本部署你的應用程序。以下是創建上述Web配置所必需的PowerShell腳本。

這會在服務器上安裝URL重寫。

#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

我基本上是我的陣營，路由器的封裝和歷史包更改爲版本3.x和設置配置在我的路由器擺脫廢棄警告的。這是我現在的反應路由器。

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

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

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