react-slide-routes,最简单的 React Router 动态切换路由方案
IPFS
上集回顾
开发 React + React Router 项目时,想实现一个路由跳转时、滑动切换路由页面的效果。
提着两把西瓜刀从 GitHub 一路砍到 Stack Overflow,楞是没找到一个简单易用的解决方案。
有人可能会说,不有官方方案 react-transition-group
吗?
其实 react-transition-group
是一个提供基础功能的库,它给了菜、给了肉、给了油,但并不是端上来一盘可以直接开动的菜。
想要一个很常见的、页面滑来滑去的路由切换效果,也没找到一个完美的方案,得自己去封装。
React 社区太惨了,这么简单的事,这么多年了竟然没人管,只好自己上了。
正片开始
react-slide-routes 🏄♂
https://github.com/nanxiaobei/react-slide-routes
react-slide-routes
用于实现下面这种路由切换的效果
![](https://assets.matters.news/embed/c381bd6c-4e2a-4d1f-9529-cbf167542842.gif)
安装
yarn add react-slide-routes
使用
import SlideRoutes from 'react-slide-routes'; import { Route, useLocation } from 'react-router-dom'; const App = () => { const location = useLocation(); return ( <SlideRoutes location={location}> <Route path="/" component={Home} exact /> <Route path="/about" component={About} /> </SlideRoutes> ); };
是的,就是这样,用 SlideRoutes
代替 Switch
即可,再没别的幺蛾子了。
我来鹅城只办三件事:简单、简单、还是 TMD 简单。
下集预告
react-slide-routes
, the easiest way to slide React routes.
→ ️https://github.com/nanxiaobei/react-slide-routes
没了。
🏄♂️
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/db32f568-5f40-4934-996d-a2c1ea5c3284.jpeg/public)