06-路由

微前端的路由协同要回答三个问题——「路由归谁管（主应用还是子应用）、URL 前缀怎么分（basename）、导航怎么不整页刷新」；而最容易被忽略的是「404 归属」「深链接」和「子应用内部路由与主应用 history 的一致」。

赞(0)陌上寒2026-10-15阅读()去评论

导航体验由六个维度决定——「即时反馈（进度条）、数据预取（hover 预加载）、过渡动画（View Transitions）、滚动恢复（后退回到原位）、加载态（骨架而非 spinner）、错误恢复（失败可重试）」；

赞(0)陌上寒2026-10-15阅读()去评论

前端权限的定位是「体验优化，不是安全边界」——它的正确做法是「后端下发权限点（不是角色），前端用权限点做三件事：路由守卫、菜单过滤、按钮/字段级控制」，而最容易出错的地方是「把『无权限』和『404』混为一谈」以及「动态路由带来的『白屏、闪烁、缓存失效』」。

赞(0)陌上寒2026-10-15阅读()去评论

TanStack Router 的核心卖点是「把 URL（路径 + params + search params）当成『有类型的结构化数据』」——所以它做到了 100% 类型安全的导航与 search 状态，并把「数据加载（loader）/ 鉴权（beforeLoad）/ 加载态与错误态」变成路由的…

赞(0)陌上寒2026-10-15阅读()去评论

Vue Router 是「路由表 + 全局守卫（beforeEach）」的模型，React Router 是「声明式组件 + 渲染控制」的模型——React 没有全局守卫钩子，权限要靠「包装组件」或「loader」实现。

赞(0)陌上寒2026-10-15阅读()去评论

数据路由（createBrowserRouter）提供 loader（渲染前取数据） 与 action（表单提交），配合 useLoaderData / useActionData / useNavigation 把「数据获取 + 提交状态 + 错误处理」统一到路由层。

赞(0)陌上寒2026-10-15阅读()去评论

路由级懒加载是「代码分割收益最大的一步」——每个页面单独打包，用户只下载当前页面的代码；声明式路由用 React.lazy + Suspense，数据路由直接用 lazy: () => import(...)。

赞(0)陌上寒2026-10-15阅读()去评论

React 的「路由守卫」本质是「控制渲染」（用包装组件或在 loader 里校验），没有 Vue 那样的 beforeEach 全局钩子；而且前端守卫只是体验优化，真正的权限必须在接口层校验。

赞(0)陌上寒2026-10-15阅读()去评论

用 useSearchParams() 读写「URL 里的查询参数」（?a=1&b=2）——它返回一个只读的 URLSearchParams 快照与一个 setter；把「筛选、分页、Tab」这类状态放进 URL，能获得「可分享、可刷新、可回退」的能力。

赞(0)陌上寒2026-10-15阅读()去评论

用 useNavigate() 在「事件处理、异步回调、Effect」里跳转——它支持 replace（替换历史）、state（传状态）与相对路径（.. / .）；渲染时的重定向用 。

赞(0)陌上寒2026-10-15阅读()去评论