React 应用通过 npm run build 构建后，使用 BrowserRouter 在静态服务器（如 Live Server）上运行时，除根路径 / 外的页面会白屏或仅渲染 Navbar——根本原因是服务端未配置客户端路由回退，导致深层路径 404；解决方案是改用 HashRouter 并修正 homepage 配置。
react 应用通过 `npm run build` 构建后，使用 `browserrouter` 在静态服务器（如 live server）上运行时，除根路径 `/` 外的页面会白屏或仅渲染 navbar——根本原因是服务端未配置客户端路由回退，导致深层路径 404；解决方案是改用 `hashrouter` 并修正 `homepage` 配置。
在 React 单页应用（SPA）中，BrowserRouter 依赖服务端对所有路由路径返回 index.html，从而交由前端 Router 渲染对应组件。但像 VS Code Live Server、GitHub Pages（默认配置）或本地静态文件服务器并不具备此能力：当用户直接访问 /show 或刷新该页面时，服务器尝试查找物理路径 /show/index.html，结果 404，仅显示空白或部分组件（如仅 Navbar，因其可能位于 index.html 的初始 HTML 中）。
✅ 推荐方案：切换为 HashRouter
HashRouter 将路由信息存于 URL 的 hash 部分（如 http://localhost:3000/#/show），浏览器不会将 hash 发送给服务端，因此所有请求均命中 index.html，前端 Router 可正常解析并渲染。这是静态部署场景下最简单、兼容性最强的方案。
修改 src/index.js：
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { HashRouter } from "react-router-dom"; // ✅ 替换为 HashRouter
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<HashRouter> {/* ✅ 包裹 App */}
<App />
</HashRouter>
);同时，还原 package.json 中的 homepage 字段（删除 "homepage": "./"）：
"homepage": "/"
⚠️ 注意：若部署到子路径（如 https://username.github.io/my-app/），才需设为 "homepage": "/my-app"；纯根路径部署（如 https://abhishekg-27.github.io/Coiner-CoinGekoAPI/）应保持为 / 或直接删除该字段（create-react-app 默认行为即正确处理）。
? 补充说明：BrowserRouter 的替代方案（仅限支持的服务端）
若坚持使用 BrowserRouter（例如部署到 Nginx、Apache 或 Vercel），则必须配置服务端路由回退：
-
Nginx 示例配置：
location / { try_files $uri $uri/ /index.html; } -
Apache .htaccess（需启用 mod_rewrite）：
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] </IfModule>
但对 GitHub Pages、Live Server 等轻量环境，HashRouter 是零配置、开箱即用的最佳实践。
? 验证与注意事项
- 清除缓存再测试：构建前删除 build/ 目录，构建后强制刷新浏览器（Ctrl+Shift+R），避免旧缓存干扰。
- 检查控制台报错：若仍不生效，打开浏览器开发者工具 → Console，查看是否出现 Failed to load resource 或 Cannot GET /show 类错误，确认是否为路由问题。
- Link 组件自动适配：HashRouter 下 <Link to="/show"> 会自动生成 #/show，无需修改任何组件代码。
- SEO 考虑：HashRouter 的 URL 含 #，对 SEO 友好度略低于 BrowserRouter；但若部署环境受限，功能完整性优先于 SEO 微小差异。
完成上述修改后，执行 npm run build，再用 Live Server 打开 build/index.html，即可正常显示 Navbar + Home（根路径 /#/）及 Show 页面（/#/show），彻底解决构建后首页组件缺失的问题。
