uselink是项目自定义hook,用于在任意组件中通过matchpath+uselocation精准判断路由激活状态(isactive),支持动态参数、通配符、basename、search/hash匹配及相对路径解析,比原生link更灵活可复用。

useLink 本身并不是 React Router 官方提供的 Hook(v6.4+ 的 react-router@6.22+ 中也未导出名为 useLink 的 API),它很可能是项目中自定义的封装 Hook,用于增强 Link 组件的“当前激活状态”判断能力。其核心目标是:在任意组件中,**无需手动比对 location.pathname,就能准确获知某个路由路径是否为当前激活状态(isActive)**。
底层依赖:useLocation + matchPath
绝大多数自定义 useLink 的实现,都基于两个基础能力:
-
useLocation():获取当前浏览器 URL 对应的
location对象(含pathname、search、hash等) -
matchPath(pattern, pathname):Router 内部用于路径匹配的工具函数(v6 中已从顶层 API 移至
react-router@6.22+的matchRoutes或直接使用matchPath工具函数)
它不是靠字符串相等(===),而是按 route 的 path 规则做模式匹配 —— 支持动态参数(:id)、通配符(*)、嵌套路由、严格模式(end)等。
isActive 的判定逻辑:matchPath 返回非 null 即激活
关键点在于:matchPath({ path: '/users/:id', end: false }, '/users/123') 返回一个匹配对象(含 params、pathname 等),而 matchPath({ path: '/users', end: true }, '/users/123') 返回 null(因 end: true 要求完全匹配)。
所以 isActive 的本质就是:
- 调用
matchPath({ path, end }, location.pathname) - 返回值不为
null→ 激活;否则 → 未激活
例如:useLink({ to: '/products/:id' }) 在 /products/42 下返回 isActive: true;在 /products 下若设 end: false 可能也激活(取决于配置),但默认 Link 行为通常设 end: true 实现精确匹配。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景,三层路由架构(触发词→SAD反馈→DAG编排),recall@10=96.97%。配置驱动(chains.yaml),零代码扩展。pip install skill-weave-chains 一键安装。
常见增强点:支持相对路径、自动处理 basename、响应 search/hash
真实项目中的 useLink 往往不止判断 pathname,还会考虑:
-
basename:若应用部署在子路径(如
/my-app/),需先剥离 basename 再匹配 -
search / hash:有些场景要求 query 参数一致才算激活(如 tab 切换带
?tab=info),此时需额外比对location.search -
相对路径解析:传入
to=".."或to="settings"时,需结合当前location.pathname计算绝对路径再匹配
这些逻辑通常封装在 resolvePath(to, fromPath)(React Router 内置工具)中,useLink 会先 resolve 再 match。
与原生 Link 的差异:更灵活、可复用、可定制
原生 <link> 的激活样式靠 className 或 style 的函数回调(function({ isActive })),仅限组件内使用;而 useLink 把这个判断逻辑抽离成 Hook,可用于:
- 导航菜单项高亮(
MenuItem组件内部调用) - 条件渲染(如只在当前页显示「编辑」按钮)
- 配合
useEffect做页面进入/离开的副作用 - 组合多个路径做“任一匹配即激活”(如侧边栏折叠时合并多个子路由)
它让路由状态感知从“视图层专属”变成了“逻辑层可编排”的能力。
不复杂但容易忽略:真正决定 isActive 的,从来不是 URL 字符串是否“看起来一样”,而是 matchPath 是否成功生成匹配结果 —— 这背后是完整的路径规则引擎,而非简单 indexOf 或 ===。










