react 应用使用 react-router-dom 时，部署到静态托管平台（如 render）后刷新非首页路由出现空白页，本质是服务端未正确回退至 index.html，需通过重写规则 + 前端路由配置协同解决。
react 应用使用 react-router-dom 时，部署到静态托管平台（如 render）后刷新非首页路由出现空白页，本质是服务端未正确回退至 index.html，需通过重写规则 + 前端路由配置协同解决。
当 React 应用采用客户端路由（如 react-router-dom v6+ 的 <browserrouter></browserrouter>），所有路由均由前端 JavaScript 控制，服务器并不知晓 /about 或 /dashboard 等路径的存在。因此，在 Render、Vercel、Netlify 等静态托管平台部署后，若用户直接访问或刷新 https://bunch-of-apps.onrender.com/about，服务器会尝试查找物理文件 /about/index.html 或 /about.html —— 不存在，于是返回 404（或空响应），导致页面空白。
✅ 正确解法是：让服务端对所有非资源请求（即非 .js/.css/.png 等静态文件）统一返回 index.html，交由前端路由接管渲染。
✅ 推荐方案：Render 平台配置 _redirects 文件（推荐，无需额外构建平台）
在项目根目录（与 public/ 同级）创建 _redirects 文件（无扩展名），内容如下：
/* /index.html 200 !/*.js /static/js/[path] 200 !/*.css /static/css/[path] 200 !/*.png /static/media/[path] 200 !/*.jpg /static/media/[path] 200 !/*.svg /static/media/[path] 200
⚠️ 注意：Render 支持
_redirects语法（基于 Netlify 规范），但需确保构建输出目录为build/（Create React App）或dist/（Vite），且该文件位于部署根目录（通常为build/_redirects）。你可在 Render 后台「Static Site」设置中确认「Publish directory」是否为build。
✅ 替代方案：Render 自定义 rewrite 规则（适用于无 _redirects 支持场景）
若平台限制或需更精细控制，可在 Render 后台 → 你的 Web Service → Settings → Redirects & Rewrites 中添加：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
| Source | Destination | Status Code | Type |
|---|---|---|---|
/(.*) |
/index.html |
200 |
Rewrite |
⚠️ 关键点：
-
必须使用
200状态码（Rewrite），而非301/302（Redirect）；重定向会触发新请求，破坏客户端路由上下文； -
Source正则/(.*)覆盖所有路径，但需确保静态资源（.js,.css等）优先匹配——Render 默认按顺序匹配，建议将资源规则置顶（如先配/static/(.*)→/static/[path]）； - 确保
index.html在构建产物根目录（检查build/index.html是否存在）。
✅ 前端配合：确认路由配置正确
确保 main.jsx 或 index.js 中使用 <browserrouter></browserrouter>（非 <hashrouter></hashrouter>），且 App 组件被正确包裹：
// main.jsx
import { BrowserRouter } from 'react-router-dom';
ReactDOM.createRoot(document.getElementById('root')).render(
<BrowserRouter>
<App />
</BrowserRouter>
);同时，检查 App.jsx 中 <routes></routes> 和 <route></route> 是否嵌套正确，避免因路由未匹配导致白屏（可添加 * 通配兜底）：
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="*" element={<NotFound />} /> {/* 必备兜底 */}
</Routes>? 验证与调试技巧
- 打开浏览器开发者工具 → Network 标签，刷新
/about页面：
✅ 正确：index.html返回 200，后续加载main.[hash].js；
❌ 错误：/about返回 404 或空响应，或index.html加载但 JS 报错（检查控制台）。 - 在 Render 日志中搜索
rewrite或404，确认重写规则是否生效； - 本地模拟：使用
serve -s build启动，访问/about并刷新 —— 若仍白屏，说明前端路由或构建配置有误。
总结：React 路由部署空白页问题 = 服务端未 fallback + 前端未兜底。只需三步：① 配置服务端重写（_redirects 或 Render Rewrite）；② 确保构建产物结构正确；③ 前端添加 * 兜底路由。无需修改 react-router-dom 版本或引入服务端渲染（SSR）。
