在平常的后台系统开发中,常常需要缓存一些之前打开的页面,方便操作,多页签就是用来管理页面的,如下图
Umi4.0版本发布到现在已经有一段时间,全新的框架当然需要学习一下新的特性和功能,由于Umi4.0使用了react-router6
,所以路由有较大改动,多页签设计也需要重新调整。
文章分为三部分
- 设计思路
- 遇到的问题
- 扩展到自建路由
一、设计思路
之所以要设计多页签,是因为现有的框架路由只能单开,Vue里面即使有keep-alive,当面对类似/detail:id
这种路由时也只能同时存在一个。
多页签结构如下: 路由与组件一对一,组件与实例一对多,实例与页签一对一
以组件实例为维度构建页签,因此需劫持渲染。多页签之所以能劫持渲染是因为其就是一个高阶组件,监听路由变化生成对应的实例。自己维护当前展示的组件列表,从框架提供的全局路由信息生成对应的组件实例,向下渲染。从路由配置里面表现为所有的组件路由都是多页签路由的子路由。
{
path: '/',
//多页签对应的组件
component: '@/layouts/MultiTagRoute.jsx',
flatMenu: true,
routes:[
//以下是实际路由
{
name: '组件1',
path: '/one',
component: './one',
icon: 'cluster',
},
{
name: '组件2',
path: '/two',
component: './two',
icon: 'cluster',
},
]
}
复制代码
那么具体的代码思路如下
- 从框架提供的路由信息里面拿到生成组件实例的方法,维护一个页签队列
- 监听路由变化,路由不在队列就加入,已经存在就激活,缓存使用display:'none',因为这里是显示的高阶组件式缓存,可操作性比较高。不是类似keepalive那种缓存内置。
- 拿到对应的路由信息生成组件实例,向下渲染
二、遇到的问题
react-router6使用 <Outlet/>
渲染路由,同时还提供了 useOutLet
这个hooks获取当前渲染信息。 useOutLet
这个hook返回的 outlet
比较有意思,它不是传统意义上的类似children的dom结构。使用isValidElement检测为true,但是使用cloneElement向其传递props却不会生效。因此想要传递props,只能按照<Outlet context={{}}/>
的方式进行参数传递。 此外umi框架在prolayout里面已经使用了<Outlet/>
,因此这里只能使用{outlet}
这种方式渲染。
umi还有有一个useAppData方法,可以返回组件实例
declare function useAppData(): {
routes: Record<id, Route>;
routeComponents: Record<id, Promise<React.ReactComponent>>;
clientRoutes: ClientRoute[];
pluginManager: any;
rootElement: string;
basename: string;
clientLoaderData: { [routeKey: string]: any };
preloadRoute: (to: string) => void;
};
复制代码
routeComponents里面包含了每一个组件的工厂函数,可以直接使用<Component>
进行渲染。这种方式使用props就可以传递参数,可以根据实际情况选择。
监听路由变化使用 useLocation
,在多页签里面使用useEffect监听location,此外location也能携带一些参数,用于丰富多页签的功能,例如刷新当前页签、跳转前关闭当前页签,跳转后自动刷新等功能,只要在query参数里面约定好即可。
三、扩展到自建路由
有了上面的设计思路,平时开发中也会遇到自建路由的需求。路由本质就是路径字符串到组件的映射。我们自建路由的配置也应如下
{
name: '多页签',
component: React.lazy(() => import('./multiTag')),
path: '/',
children: [
{
name: '组件A',
path: '/componentA',
component: React.lazy(() => import('./componentA')),
},
{
name: '组件B',
path: '/componentB',
component: React.lazy(() => import('./componentB')),
}
]
}
复制代码
使用 context
维护全局字符串路径,向下传递自建跳转方法就可以模拟路由跳转,自建的路径信息数据结构与location保持一致就可以。
这里还有一点需要注意的地方,传统异步加载是这样的方式() => import('./componentA')
,没有添加React.lazy,这样加载出来的文件会被解析为module。
它不是一个react组件,如果使用了hooks在某些情况会出现render more than one hooks
的报错,使用时需要注意。
四、总结
以上就是多页签的总体设计思路,大家有什么想法,欢迎在评论区交流。