React生产环境下携带id参数的组件路由无法正常跳转问题求助

问题根因 #

该问题是React使用BrowserRouter部署在IIS环境下的典型异常，主要由三类问题导致：

1. 打包后的静态资源（JS/CSS）引用路径错误
2. URL重写规则未完整覆盖静态资源请求的排除逻辑
3. 部分场景下是React组件命名不规范导致生产环境加载失败

解决方案 #

1. 修正package.json配置 #

在项目根目录的package.json文件中添加homepage字段，明确资源加载的根路径：

• 若应用部署在域名根目录，配置为：
  "homepage": "/"
• 若应用部署在域名子目录（如https://domain.com/meet），配置为对应子路径：
  "homepage": "/meet"

2. 调整Web.config配置 #

替换原有的Web.config内容为如下配置，完善重写规则，补充静态资源路径的排除逻辑，新增静态资源MIME类型声明：

<?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|static|assets|favicon\.ico)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        <staticContent>
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <remove fileExtension=".js" />
            <mimeMap fileExtension=".js" mimeType="application/javascript" />
            <remove fileExtension=".css" />
            <mimeMap fileExtension=".css" mimeType="text/css" />
        </staticContent>
    </system.webServer>
</configuration>

3. 修正React组件命名 #

React要求自定义组件名必须首字母大写，将原路由配置中的screen_Share组件重命名为ScreenShare，同步修改路由声明：

<Route exact path="/screen_Share/:id" component={ScreenShare}/>

本地开发环境对大小写不敏感不会触发异常，但生产打包后会因命名规范问题导致组件加载失败。

4. 可选临时验证方案 #

如果需要快速验证问题来源，可以将路由模式从BrowserRouter切换为HashRouter，该模式下不需要额外的URL重写规则即可正常访问，可快速确认是否为重写规则导致的问题。

修改完成后重新打包部署即可解决空白页问题。

内容的提问来源于stack exchange，提问作者Zaid Khan