南小北

lee.so

react-slide-routes,最简单的 React Router 动态切换路由方案

發布於

上集回顾

开发 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 用于实现下面这种路由切换的效果

安装

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

没了。

🏄‍♂️

喜歡我的文章嗎?
別忘了給點支持與讚賞,讓我知道創作的路上有你陪伴。

CC BY-NC-ND 2.0 版權聲明

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區