使用 IIS 服务时在 REACT 上的嵌套路由

Question

I serve react SPA through IIS.(在特定目录中上传构建结果)

直接访问 urlhttp://example.com/About或刷新返回 404 错误，因此我想像下面这样添加web.config。

<?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" /> 
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
</conditions> 
<action type="Rewrite" url="/" /> 
</rule> 
</rules> 
</rewrite>
</system.webServer> 
</configuration>

以前的问题已经解决，但我仍然无法像http://example.com/directory/page1那样直接访问嵌套的 url。(页面不返回任何错误代码，只是空白！

有什么遗漏点吗？

提前谢谢。

Answer 1

我遇到了同样的问题，最终意识到web.config很好，但问题是我index.html中 JS 包的相对路径。

例如，index.html中的脚本标记可能如下所示：

<script defer="defer" src="app.js"></script>

如果你访问http://example.com/directory/page1，IIS实际上返回你的index.html但HTML包含相对的src路径，所以它试图在http://example.com/directory/app.js加载JS包，

而JS包不存在。我通过在 webpack 配置中设置输出公共路径来解决此问题output: { publicPath: '/' }这使 src 成为绝对路径：

<script defer="defer" src="/app.js"></script>

https://webpack.js.org/configuration/output/#outputpublicpath