React应用部署到普通主机后JSX组件无法显示如何解决

出现页面可加载但不渲染JSX、直接显示app.js内容的问题，核心是静态资源路径、路由配置、服务器MIME类型三类配置存在错误，按以下步骤逐一修复：

1. 修正package.json的homepage配置并重新打包 #

部署在mydomain.com/app子路径时，homepage字段必须严格匹配部署路径，不要多写/漏写末尾斜杠：

{
  "homepage": "https://mydomain.com/app",
  // 其余原有配置保持不变
}

修改完成后删除项目根目录下的node_modules/.cache缓存文件夹，重新执行npm run build生成新的打包产物，将新build目录下的所有文件全量上传覆盖服务器端的public_html/app目录，不要复用旧的打包文件。

2. 给路由配置匹配的basename #

如果使用React Router做路由管理，必须给路由根组件绑定和子路径一致的basename，否则路由匹配失败会导致组件无法正常渲染：

• React Router v6 版本修改App.js配置：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    // basename严格和部署子路径一致，即/app
    <BrowserRouter basename="/app">
      <Routes>
        // 原有路由配置保持不变
        <Route path="/" element={<HomePage />} />
        // 其余业务路由
      </Routes>
    </BrowserRouter>
  )
}

• React Router v5 版本同样给<BrowserRouter>组件添加basename="/app"属性即可。

3. 替换.htaccess配置，补全MIME类型和重写规则 #

直接显示JS源码的核心诱因通常是服务器未正确识别JS文件的MIME类型，或是重写规则错误将JS资源请求转发到了index.html。将public_html/app目录下的.htaccess文件替换为以下内容：

RewriteEngine On

# 补全静态资源MIME类型，避免被当成纯文本返回
AddType application/javascript .js .mjs
AddType text/css .css
AddType image/svg+xml .svg
AddType image/png .png
AddType image/jpeg .jpg .jpeg

# 已存在的静态资源、目录直接返回，不走重写逻辑
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
# 子路径路由重写规则，所有不存在的路径统一转发到/app下的index.html
RewriteRule ^ /app/index.html [L]

# 关闭目录浏览权限
Options -Indexes

4. 校验入口文件资源引用 #

重新打包后打开本地build目录下的index.html，检查所有script、link标签的资源引用路径是否以/app/开头，正确的引用格式示例：

<link rel="stylesheet" href="/app/static/css/main.abc123.css">
<script defer src="/app/static/js/main.def456.js"></script>

如果路径是从根目录/直接开头、没有/app前缀，说明homepage配置未生效，重新执行打包步骤即可。

验证方法 #

修改完成后用浏览器无痕模式访问站点，打开开发者工具切换到Network面板：

• 确认所有JS、CSS资源请求状态为200
• 确认JS资源的响应类型为javascript，CSS资源响应类型为stylesheet，不存在响应类型为text/plain或text/html的静态资源
• 控制台无路由匹配、资源加载相关报错即可正常渲染组件

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