Refine项目路由提供者从3.x.x迁移到4.x.x指南

Refine项目路由提供者从3.x.x迁移到4.x.x指南

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。 项目地址: https://gitcode.com/gh_mirrors/re/refine

前言

Refine作为一个强大的React框架，在4.x.x版本中对路由系统进行了重大重构。本文将深入解析这次重构的核心思想，并指导开发者如何平滑地从3.x.x版本迁移到4.x.x版本。

路由重构的核心动机

Refine 4.x.x版本的路由重构主要基于以下设计理念：

1. 解耦与灵活性：将路由控制完全交给开发者，不再强制特定的路由定义方式
2. 企业级适配：使Refine能更好地适应企业级应用的复杂路由需求
3. 渐进式集成：允许开发者将Refine逐步集成到现有项目中，无需重构现有路由结构

迁移前的重要注意事项

在开始迁移前，开发者需要了解以下关键变化：

1. 认证检查机制：不再由路由自动处理，需使用useIsAuthenticated钩子或Authenticated组件
2. 访问控制检查：需手动使用useCan钩子或CanAccess组件实现
3. 路由创建责任：完全由开发者控制，Refine不再自动生成路由

Refine组件的变化

废弃的Props

以下Layout相关Props已被废弃：

• Layout
• Sider
• Title
• Header
• Footer
• OffLayoutArea

特殊页面处理

以下特殊页面Props也已废弃：

• DashboardPage
• catchAll
• LoginPage

开发者需要自行创建对应的路由和页面组件。

自定义Sider组件的调整

如果项目中使用了自定义的Sider组件，需要进行以下修改：

路由上下文钩子变更

// 旧版本用法
import { useRouterContext } from "@refinedev/core";
const { Link } = useRouterContext();

// 新版本用法  
import { useLink } from "@refinedev/core";
const Link = useLink();

菜单生成逻辑

虽然useMenu钩子的返回值未变，但菜单项key的生成方式有所调整，需要检查自定义菜单逻辑是否受影响。

路由行为的重大变化

认证流程

认证流程现在需要开发者显式处理，推荐方式：

• 使用Authenticated组件包裹需要认证的页面
• 在组件内部使用useIsAuthenticated钩子

访问控制

访问控制检查也需要显式处理：

• 使用CanAccess组件包裹受限内容
• 在组件内部使用useCan钩子

新路由提供者的使用指南

React Router v6集成

1. 使用标准react-router-dom组件创建路由结构
2. 用BrowserRouter包裹<Refine>组件
3. 从@refinedev/react-router-v6导入routerProvider
4. 在资源定义中指定action路径

注意：从react-router-dom@6.5.0开始，部分段支持已被移除，需要更新路由定义方式。

Remix集成

1. 使用文件系统路由创建页面
2. 从@refinedev/remix-router导入routerProvider
3. 在资源定义中配置action路径

Next.js集成

1. 使用Next.js文件系统路由
2. 从@refinedev/nextjs-router导入routerProvider
3. 在资源定义中设置action路径

迁移策略建议

1. 逐步迁移：先替换路由提供者，再逐个更新特殊页面
2. 组件隔离：将认证和访问控制逻辑提取到高阶组件中
3. 测试驱动：为关键路由添加测试用例确保迁移后行为一致
4. 利用示例：参考官方示例项目中的实现方式

总结

Refine 4.x.x的路由重构赋予了开发者更大的灵活性和控制权，虽然迁移过程需要一定工作量，但最终将获得更强大、更可定制的路由系统。建议开发者仔细评估项目需求，选择最适合的迁移路径。

refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架，具有无与伦比的灵活性。 项目地址: https://gitcode.com/gh_mirrors/re/refine