React中如何引入css呢

最新推荐文章于 2024-08-29 13:07:02 发布

姑老爷呀

最新推荐文章于 2024-08-29 13:07:02 发布

阅读量590

点赞数

文章标签： react.js css 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/127535664

版权

本文介绍了在React中实现多页签管理的思路和遇到的问题，包括设计组件实例与页签的一对一关系，监听路由变化，以及如何处理react-router6的渲染和umi框架的使用。同时，讨论了自建路由的扩展方法和注意事项，如异步加载组件的正确处理。最后，提及了一本关于Vue技巧的文档。

摘要由CSDN通过智能技术生成

在平常的后台系统开发中，常常需要缓存一些之前打开的页面，方便操作，多页签就是用来管理页面的，如下图

Umi4.0版本发布到现在已经有一段时间，全新的框架当然需要学习一下新的特性和功能，由于Umi4.0使用了react-router6，所以路由有较大改动，多页签设计也需要重新调整。

文章分为三部分

1.设计思路
2.遇到的问题
3.扩展到自建路由

之所以要设计多页签，是因为现有的框架路由只能单开，Vue里面即使有keep-alive，当面对类似/detail:id这种路由时也只能同时存在一个。

多页签结构如下：路由与组件一对一，组件与实例一对多，实例与页签一对一

以组件实例为维度构建页签，因此需劫持渲染。多页签之所以能劫持渲染是因为其就是一个高阶组件，监听路由变化生成对应的实例。自己维护当前展示的组件列表，从框架提供的全局路由信息生成对应的组件实例，向下渲染。从路由配置里面表现为所有的组件路由都是多页签路由的子路由。

{path: '/',//多页签对应的组件component: '@/layouts/MultiTagRoute.jsx',flatMenu: true,routes:[//以下是实际路由{name: '组件1',path:

关注