上集回顾

开发 React + React Router 项目时，想实现一个路由跳转时、滑动切换路由页面的效果。

提着两把西瓜刀从 GitHub 一路砍到 Stack Overflow，楞是没找到一个简单易用的解决方案。

有人可能会说，不有官方方案 react-transition-group 吗？

其实 react-transition-group 是一个提供基础功能的库，它给了菜、给了肉、给了油，但并不是端上来一盘可以直接开动的菜。

想要一个很常见的、页面滑来滑去的路由切换效果，也没找到一个完美的方案，得自己去封装。

React 社区太惨了，这么简单的事，这么多年了竟然没人管，只好自己上了。

正片开始

react-slide-routes 🏄‍♂

️github.com/nanxiaobei/…

react-slide-routes 用于实现下面这种路由切换的效果

安装

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.

→ ️github.com/nanxiaobei/…

没了。

🏄‍♂️