Netlify 部署后 React Router 嵌套路由（如 /private/my-profile）无法渲染，根本原因是 package.json 中错误配置了 "homepage": "."，导致静态资源路径解析失败，而非路由配置或重定向规则问题。
netlify 部署后 react router 嵌套路由（如 `/private/my-profile`）无法渲染，根本原因是 `package.json` 中错误配置了 `"homepage": "."`，导致静态资源路径解析失败，而非路由配置或重定向规则问题。
在使用 react-router-dom@6+ 构建单页应用（SPA）并部署到 Netlify 时，嵌套路由本地运行正常但线上 404 或白屏，是一个高频陷阱。你已正确配置了 public/_redirects（/* /index.html 200），也实现了基于 Outlet 的受保护路由逻辑（Auth 组件 + useUser Token 解析），说明路由结构和鉴权逻辑本身无误——问题出在构建产物的资源加载层面。
? 根本原因：homepage 配置破坏了静态资源路径
当你在 package.json 中设置：
"homepage": "."
Create React App（CRA）会将所有生成的 <script></script>、<link> 标签的 src/href 属性改为相对路径，例如：
<script defer src="./static/js/main.c8a01835.js"></script> <link href="./static/css/main.7a9e2d1f.css" rel="stylesheet">
这在根路径（如 https://main--fascinating-melba-bd8f4d.netlify.app/）下可正常加载；但当用户直接访问嵌套 URL（如 https://main--fascinating-melba-bd8f4d.netlify.app/private/my-profile）时，浏览器会尝试从 当前路径前缀 ./private/ 下加载资源，即请求：
https://main--fascinating-melba-bd8f4d.netlify.app/private/static/js/main.c8a01835.js ❌ 404
而实际资源位于根目录：/static/js/main.c8a01835.js。此时 JS 未加载 → React 应用未启动 → 路由器未挂载 → 所有 <route></route>（包括嵌套）均不生效，页面留白或仅显示 HTML 骨架。
⚠️ 注意：
"homepage": "."仅适用于不依赖客户端路由的静态站点（如纯 HTML/CSS 页面），与react-router-dom的BrowserRouter完全冲突。
✅ 正确解决方案：移除 homepage 并确保根路径引用
-
删除
package.json中的homepage字段：// ❌ 错误（删除这一行） "homepage": ".",
确认
homepage字段完全不存在（不是设为""或"."，而是彻底移除）。-
重新构建并部署：
npm run build # 或 yarn build
然后推送到 Netlify（或手动上传
build/目录）。
构建后，index.html 中的资源路径将变为绝对根路径：
<script defer src="/static/js/main.c8a01835.js"></script> <link href="/static/css/main.7a9e2d1f.css" rel="stylesheet">
无论用户访问 /、/private 还是 /private/my-profile，浏览器都会正确从根目录加载 JS/CSS，React 应用得以启动，Router 挂载，嵌套路由自然生效。
? 补充验证与最佳实践
- ✅ 检查构建产物：打开
build/index.html，搜索<script src="</code">，确认路径以 <code>/static/</script>开头（非./static/或static/）。 - ✅ Netlify 重定向仍需保留：
public/_redirects中的/* /index.html 200是必须的，它确保所有前端路由均由index.html响应，交由 React Router 处理。 - ✅ 避免
basename误用：除非你明确需要将整个应用部署在子路径（如/my-app/），否则不要在<router basename="/my-app"></router>中设置basename—— 这会要求所有路由路径带前缀，且需同步调整homepage（应设为"/my-app"），但你的场景无需此操作。 - ✅ 环境一致性：本地开发使用
npm start（Webpack Dev Server）自动处理 SPA 路由，与生产环境行为不同，因此务必通过npm run build && npx serve -s build本地预览构建产物，复现并验证修复效果。
至此，你的嵌套路由 /private/my-profile 和 /private/sell-something 将在 Netlify 上完全可用：未登录时重定向至 /login，登录后正确渲染对应组件。问题根源不在代码逻辑，而在构建配置的细微偏差——这是 CRA + SPA + 静态托管平台的经典“坑”，精准识别即可一击解决。
