refine useResourceWithRoute 钩子按路由名获取资源定义及其在 v4 中的现代替代方案 useResource【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine本篇以 refinev3 版本 API 参考中的useResourceWithRoute钩子为核心讲清它的设计定位——从Refine组件的resources数组中按路由名反查资源对象、其返回值类型与典型用法并结合当前仓库源码说明该钩子为何被标记为 deprecated以及在新路由体系下应如何使用useResource与useResourceParams完成同样的资源解析。读完后你将能在旧项目中正确使用该钩子并掌握在新项目中获取资源定义、路由参数与 action 的推荐方式。useResourceWithRoute 是什么useResourceWithRoute用于按路由名route name获取resources数组中定义的资源对象。这些resources是开发者在Refine组件上声明的资源列表每个资源项包含name、route、list/create/edit/show等路由与页面配置。根据 v3 API 参考文档 的明确说明这个钩子有两个关键定位它是 refine内部使用的钩子used internal in refine正常情况下业务代码不需要直接调用官方仍将其导出是因为部分使用场景下它会很有用we export it as it may be useful for some use-cases。也就是说它是一个半内部工具你在自定义路由组件、自绘菜单或需要当前 URL 对应哪个资源这类逻辑时可以借助它拿到资源定义但日常 CRUD 开发中绝大多数场景不需要触碰它。用法示例文档给出的标准用法如下摘自 useResourceWithRoute.mdimport { useResourceWithRoute } from pankod/refine-core; const resourceWithRoute useResourceWithRoute(); const resource resourceWithRoute(posts);要点解析useResourceWithRoute()本身不接收参数调用后返回一个函数resourceWithRoute向该函数传入路由名如posts它会到Refine声明的resources数组中匹配出对应的资源对象并返回返回的资源对象类型是IResourceItem即你在resources数组中定义的那个资源项含name、route、label、各 action 组件配置等。API Reference 与返回值原始文档的 API 部分很简洁其返回值定义如下描述类型resourceWithRoute(route: string) IResourceItem即钩子返回一个函数入参为字符串类型的路由名出参为IResourceItem资源对象。要理解这个返回值的实际内容需要看IResourceItem的构成。v3 文档中 useResource 参考页 给出了该接口的完整形态interface IResourceItem extends IResourceComponents { name: string; // 资源名也是传给 dataProvider 的 resource 参数 label?: string; // 用于菜单、面包屑等展示 route?: string; // 路由名useResourceWithRoute 就是按它匹配的 icon?: ReactNode; canCreate?: boolean; canEdit?: boolean; canShow?: boolean; canDelete?: boolean; options?: OptionsProps; parentName?: string; // 嵌套资源时指向父资源 }其中IResourceComponents声明了list、create、edit、show四个可选页面组件。文档还特别指出canCreate、canShow、canEdit等布尔属性会在对应组件定义于resources时自动生成即你配了edit组件canEdit即为true。从接口结构可以推断useResourceWithRoute的工作流程是以传入的 route 字符串为 key在resources数组中查找route或name相等的项返回整个资源对象——这正是按路由名反查资源语义的来源。同族钩子 useResourcev3 版本与useResourceWithRoute同属 v3 资源类钩子的是useResource两者关系需要分清useResource返回resources数组本身以及从当前路由和 query 参数推断出的resource、resourceName、id、action它也支持通过resourceNameOrRouteName属性按名称取资源import { useResource } from pankod/refine-core; const { resource } useResource({ resourceNameOrRouteName: posts, });而useResourceWithRoute只暴露route → 资源对象这一个函数式能力定位更窄。v3 文档中useResource的返回值包括字段含义resources在Refine中定义的IResourceItem[]resource当前资源对象resourceName资源名idquery 参数idactionquery 参数actioncreate|edit|show|clone|undefined现状已废弃仅限旧路由体系需要注意一个关键事实useResourceWithRoute在当前版本v4 及以上中已被废弃。仓库的 packages/core/CHANGELOG.md 在描述新路由体系的迁移说明中明确写道useResourceWithRouteis now deprecated and only works with the legacy routing system.即该钩子只与旧版legacy路由系统兼容。如果你维护的是 v3 老项目、仍在使用 legacy 路由可以继续沿用文档中的用法但如果新项目或已完成 v4 迁移应改用新的资源类钩子。v4 替代实现useResource 的当前源码当前仓库中useResource的真实实现位于 packages/core/src/hooks/use-resource-params/use-resource/index.ts它替代了useResourceWithRoute的按名称/路由取资源职责能力更强export function useResource(args?: UseResourceParam): UseResourceReturnType { const { resources } useContext(ResourceContext); const params useParsed(); const select (resourceName: string, force true) { const pickedResource pickResource(resourceName, resources); if (pickedResource) { return { resource: pickedResource, identifier: pickedResource.identifier ?? pickedResource.name, }; } if (force) { // 未找到时创建临时资源项保证调用方总能拿到对象 const resource { name: resourceName, identifier: resourceName }; return { resource, identifier: resource.name }; } return undefined; }; // ... }从源码见 index.ts 第 56–113 行可以确认几个关键行为参数语义useResource(identifier?)接受一个可选的资源标识identifier 或 name。传入时优先从resources中匹配未传入时则回退到从当前路由解析出的资源useParsed()的params.resource。这覆盖了useResourceWithRoute的按路由名查资源场景。容错创建当传入的 name 在resources中不存在且force为true默认时源码会现场构造一个{ name, identifier }的临时资源对象返回而不是抛错——这对操作一个未在resources中声明的临时资源的场景很实用。返回值{ resources, resource, select, identifier }其中select(resourceName, force)就是文档化过的按名称选资源函数identifier则统一处理了资源未显式声明identifier时回退到name的逻辑。资源类型定义现在位于 packages/core/src/contexts/resource/types.ts。与 v3 相比IResourceComponents的四个 actionlist/create/clone/edit/show在 v4 中表示路由路径ResourceRoutePath而label、hide、icon、parent、dataProviderName等配置收敛到了meta中并新增了identifier字段用于避免资源名冲突见 types.ts 第 68–92 行。更底层的组合useResourceParams如果你的需求不只是拿到资源对象而是要同时推断id与actionv4 提供了组合钩子useResourceParams。它的文档注释见 index.ts 第 32–53 行完整描述了推断规则resource显式传入优先即使未在Refine/中声明否则从路由推断id显式传入优先否则从路由推断若自定义 resource 与路由推断的不同则id取undefinedaction显式传入优先否则从路由推断formAction仅能取edit/clone/createresource 不一致时回退为create。其内部正是基于useResource()的select与identifier完成显式参数 vs 路由推断的仲裁见 index.ts 第 54–103 行。相关行为有对应测试覆盖可参考 index.spec.tsx。选型建议场景推荐方案v3 老项目、legacy 路由需要按路由名反查资源useResourceWithRoute按 v3 文档用法见本文用法示例v4 新项目按名称/路由获取资源对象useResource()/useResource(posts)需要按名查找时用返回的selectv4 需要同时推断 resource / id / action / formActionuseResourceParams({ resource?, id?, action? })适用前提与限制useResourceWithRoute的用法仅在 v3 及 legacy 路由体系下有效官方 CHANGELOG 已明确其 deprecated 状态在新路由体系下useParsed、useResource等钩子接管了路由 → 资源的解析职责。如果你在 v4 代码中搜索useResourceWithRoute找不到导出这是符合预期的——它的职责已被上文介绍的useResource完整承接。参考文件useResourceWithRoute 文档v3useResource 文档v3useResource 当前实现useResourceParams 实现资源类型定义废弃声明所在 CHANGELOG【免费下载链接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.项目地址: https://gitcode.com/GitHub_Trending/re/refine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考