点击刷新时，IIS 上出现路由 404 错误

Question

我没有找到这个问题的解决方案，但我已经尝试了各种解决方案，但没有任何效果。我有一个 React JS 应用程序，当部署在测试服务器上并且您在页面上点击刷新时，我收到 404 错误消息。我尝试过 URL 重写，这有助于导航回主页，但这并不能解决刷新问题。请帮忙。

Answer 1

我们也可以在项目的根目录中创建一个web.config文件来解决这个问题。

web.config文件内容

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React 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="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

Answer 2

这对我有用：

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

我还确保我的应用程序中的路径<Route>具有正确的测试服务器路径，这修复了它！

<Route path="/has/the/correct/testserver/path" component={testcomponent} />

Answer 3

您需要在重写配置中添加规则。这样您的反应应用程序中的每个网址都会返回您的基页。

<rule name="PageRefresh" stopProcessing="true">
    <match url=".*" ignoreCase="false" />
    <conditions logicalGrouping="MatchAll" trackAllCaptures="false">                        
        <add input="{URL}" pattern="/build(.*)" negate="true" />
        <add input="{URL}" pattern="/script(.*)" negate="true" />       
        <add input="{HTTP_HOST}" pattern="(YOUR_DOMAIN).com" />
    </conditions>
    <action type="Rewrite" url="/{C:1}/{C:1}.html" />
</rule>