从手写 Hash 路由到 React Router一个路由练习的关键实现前端路由的目标是在单页应用中根据 URL 切换页面组件而不按传统多页应用方式重新请求整份 HTML。本练习基于 React、Vite 和react-router-dom集中实现了基础路由、动态参数、嵌套路由、404 与路由级懒加载。本文依据本地代码静态分析整理运行未验证。1. 用 Router 接管页面切换入口路由在App.jsxRouter Suspense fallback{divLoading.../div} Navigation / Routes Route path/ element{Home /} / Route path/about element{About /} / Route path/user/:id element{UserProfile /} / Route path* element{NotFound /} / /Routes /Suspense /Router项目将HashRouter别名为Router。它使用#后的路径管理前端状态例如#/about。Routes负责匹配Route描述“路径对应哪个组件”。导航栏用LinkLink to/aboutAbout/LinkLink让 React Router 处理跳转适用于 SPA 路由切换。2. 路由级懒加载首屏不必下载全部页面页面不是普通静态导入而是const Home lazy(() import(./pages/Home)) const Products lazy(() import(./pages/Products))lazy import()实现代码分割访问页面时才加载对应模块。由于异步加载需要等待时间外层必须由Suspense包裹并显示加载占位。这适合管理后台、图表、编辑器或访问频率低的页面不应把每个很小且高频的组件都拆分成独立包。3. 动态参数同一页面处理不同资源用户页规则Route path/user/:id element{UserProfile /} /访问/user/123后const { id } useParams()可得到字符串123。产品详情使用相同模式读取:productId。真实业务中参数通常用于请求详情接口并应处理参数格式校验、加载状态和接口异常。4. 嵌套路由共享布局与子页面出口产品模块Route path/products element{Products /} Route path:productId element{ProductDetail /} / Route pathnew element{ProductNew /} / /Route父组件提供Outlet /当访问/products/123时Products先渲染共享标题ProductDetail再渲染到Outlet位置。该模式适合共享侧栏、Tab、权限逻辑的业务模块。5. 404、重定向与编程式跳转未知地址由通配符兜底Route path* element{NotFound /} /404 页通过useNavigate在逻辑中跳转const navigate useNavigate() navigate(/)而Navigate用于声明式重定向Route path/old-path element{Navigate to/new-path /} /两个代码审查点/new-path未见对应路由配置按当前代码推断会进入 404需要补充目标路由或修改跳转目标。404 页创建了 3 秒定时器但没有清理。建议在useEffect中返回clearTimeout(timer)避免组件提前卸载后仍触发跳转。6. 小结这个练习覆盖了 React Router 的主干能力HashRouter提供路由上下文Routes、Route描述路径与页面Link用于导航lazy Suspense用于按需加载useParams读取动态参数Outlet承载嵌套路由Navigate、useNavigate分别处理声明式与编程式跳转path*负责 404 兜底。面试中可以总结为我完成了一个 React SPA 路由练习并在基础路由之上补充了页面级代码分割、动态参数和嵌套路由同时关注到重定向目标必须存在、异步副作用必须清理等可靠性问题。