React 和 IIS 重写 url 配置

Question

我对“React route”和“IIS configuration”有疑问。 我在 IIS 添加了以下 url 重写角色：

<?xml version="1.0" encoding="UTF-8"?>    
<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" />    
         </conditions>    
         <action type="Rewrite" url="/index.html" />    
       </rule>    
     </rules>    
   </rewrite>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>    
 </system.webServer>    
</configuration> 

使用该配置，当我使用该应用程序导航时它工作正常，但如果我尝试刷新页面，它变成空白，似乎 url 重写不起作用。 （如果我尝试使用节点服务器，那不会发生）

Answer 1

看起来你的url重写规则配置是正确的，我想问题应该是React路由没有处理url，如果index页面没有向react路由发送请求，就会出现问题。

在这种情况下，您可以尝试添加到 Index.html 页面，这应该可以解决您的问题。 并且href属性应该根据你的反应应用程序进行调整。

您也可以参考这个类似的案例： How do I setup react-router clean URL's with IIS?

Answer 2

感谢@Xudong Peng 的建议，帮助我解决了问题。

问题是关于脚本标签的路径，文件的 url 被设置为相对路径而不是绝对路径：

<script defer="defer" src="main.bundle.js">

代替：

<script defer="defer" src="/main.bundle.js">

这是由 webpack 的缺失配置给出的，我没有在output节点中设置publicPath

output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        clean: true,
    }

补充说问题将得到解决。