react-slide-routes，最簡單的 React Router 動態切換路由方案

上集回顧

開發 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/…

沒了。

🏄‍♂️