用 Vite + React 快速搭建 SPA，配合 React Router v6 实现客户端路由，注意路径匹配顺序、服务端 fallback 配置及组件卸载清理，避免样式丢失、状态残留等问题。
用现代前端框架写一个基础 SPA，核心不是“从零造轮子”，而是选对轻量方案、避开路由和状态的常见陷阱。
用 Vite + React 快速启动 SPA
Vite 是目前最省心的 SPA 起手方式，比直接配 Webpack 或旧版 Create React App 更快、更干净。它默认支持 ES 模块、热更新，且不强制你一开始就面对一堆配置。
- 运行
npm create vite@latest my-spa -- --template react，然后进目录cd my-spa，再npm install && npm run dev - 默认入口是
src/main.jsx，渲染目标是index.html里的<div id="root"></div>，这就是 SPA 的唯一挂载点 - 所有页面切换都发生在该容器内，不会触发整页刷新 —— 这就是 SPA 的本质行为，Vite 默认就满足
用 React Router 实现客户端路由
SPA 的关键能力是 URL 变化但不重载页面，react-router-dom 是当前最主流、API 最稳定的实现方案。v6 版本必须用 createBrowserRouter 和 RouterProvider，不再支持 <browserrouter></browserrouter> 包裹组件的旧写法。
- 安装：
npm install react-router-dom - 在
src/main.jsx中替换默认渲染逻辑：导入createBrowserRouter和RouterProvider，定义router = createBrowserRouter([{ path: "/", element: <home></home> }, { path: "/about", element: <about></about> }])，再用<routerprovider router="{router}"></routerprovider>替代ReactDOM.render - 注意：路径匹配是严格前缀匹配，
path="/"必须放在最后，否则会拦截所有子路径；要用index属性声明首页（如{ index: true, element: <home></home> }）才更安全
避免服务端 404：静态部署时要配 fallback
开发时 vite dev 自动处理所有路径跳转，但一旦 build 出 dist/ 静态文件并扔到 Nginx、GitHub Pages 或 Netlify 上，用户直接访问 /about 就会 404 —— 因为服务器找不到这个物理路径。
- 解决方法不是改前端代码，而是配服务器：Nginx 加
try_files $uri $uri/ /index.html;；Vercel 在vercel.json里加"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }] - GitHub Pages 没有重写能力，得用
HashRouter替代BrowseRouter（即把 URL 变成/#/about），但体验略差，只建议临时调试用 - 本地测试 build 后行为，别只信
npm run dev—— 运行npm run build && npx serve -s dist才接近真实环境
真正卡住新手的往往不是“怎么写页面”，而是路由跳转后样式丢失、状态没清空、返回按钮失效这些细节。比如 useEffect 里没清理定时器，或组件卸载后还在发请求，这类问题在单页里比多页更隐蔽。
