Config Router:一个 React Router 路由守卫及集中配置管理工具

·  阅读 2470
Config Router:一个 React Router 路由守卫及集中配置管理工具

如果你刚刚从 Vue 转到 React 技术栈,如果你正因 React Router 无法轻松实现 路由集中配置管理路由守卫 的功能而困扰,希望这篇文章能够对你有所帮助。

一、开发背景

前段时间因为业务需要,使用 React + React Router 进行开发。业务中,存在部分页面需要鉴权才能访问,若使用 Vue + Vue Router 这个问题将很好解决,使用 beforeEach 钩子即可。但 React Router 没有提供这样的 API。

并且,业务中需要对路由进行集中管理,即写一个路由配置文件,该文件清晰地表明了路由的嵌套关系。而 React Router 从 4.x 版本开始就不支持这种模式,转而采取 组件即路由 的理念。

因此,开发一个支持 路由集中配置管理路由守卫功能的组件 很有必要。

二、项目地址

该组件命名为 Config Router,目前已经可以使用,只是还不太完善,欢迎志同道合的小伙伴参与一起修改和维护。

项目托管在 GitHub 上,具体的使用方法也有对应的中英文文档。

项目 GitHub 地址:github.com/syy11cn/con…

三、项目简介

Config Router 是一个支持路由集中配置管理和路由守卫功能的路由库,需要配合 React Router 4.x 以上版本使用。

可以使用 RouterView 组件进行路由占位,使用方法类似于 Vue Router 中的 <router-view> 组件。该组件提供了 onEnter 接口,用于实现类似于 beforeEach 的功能。只有调用 next 方法,才能放通路由。同时通过调用 next(redirectPath) 可以实现路由重定向。

具体的使用说明可以参考 README.md,其中有详细的说明及示例代码。

同时,Config Router 也支持类似于 Vue Router 中的路由集中配置管理。使用数组表示路由的嵌套结构,并将数组传递给 RouterView 组件,就可以实现嵌套路由的自动渲染。

嵌套路由的数组结构同样可以参考 README.md

四、安装

yarn add -D @syy11cn/config-router
复制代码

npm i -D @syy11cn/config-router
复制代码

五、TODOs

  • 支持路由懒加载
  • 编写测试
  • 配置 CI/CD 工作流

六、后记

欢迎各位大佬对项目或代码方面进行指正,也欢迎感兴趣的同学们参与维护项目(当然也求一个宝贵的 ⭐ ~)。

目前因为个人水平有限,还不会编写测试和配置 GitHub CI/CD 工作流,希望能够得到方向性的指点,感激不尽🙏。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改