上集回顾
开发 React + React Router 项目时,想实现一个路由跳转时、滑动切换路由页面的效果。
提着两把西瓜刀从 GitHub 一路砍到 Stack Overflow,楞是没找到一个简单易用的解决方案。
有人可能会说,不有官方方案 react-transition-group
吗?
其实 react-transition-group
是一个提供基础功能的库,它给了菜、给了肉、给了油,但并不是端上来一盘可以直接开动的菜。
想要一个很常见的、页面滑来滑去的路由切换效果,也没找到一个完美的方案,得自己去封装。
React 社区太惨了,这么简单的事,这么多年了竟然没人管,只好自己上了。
正片开始
react-slide-routes ♂
️ https:// github.com/nanxiaobei/r eact-slide-routes
react-slide-routes
用于实现下面这种路由切换的效果
![c0d905f2254f0e327631375863a4a3d6.png](https://i-blog.csdnimg.cn/blog_migrate/e99d4d09d402adcbf195b6e2747cf670.png)
安装
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
没了。
♂