基於react-router實現的一個媲美原生路由動畫效果的Router

寫過客戶端的小夥伴，在寫web頁面的時候，都會以爲頁面切換起來很生硬，做爲一個從iOS開發轉前端的我來講，尤爲不能接受，所以，基於react-router的基礎上，寫了一個Router庫 react-router-virgo，讓使用者以極簡的方式就可使Web頁面切換能達到原生路由切換的動畫效果。

react-router-virgo 簡介

這個路由組件還沒徹底達到個人預期，後面有時間會繼續迭代優化。目前這個路由組件支持如下功能：

• 無轉場動畫切換（現有的web頁面切換體驗）
• push動畫切換（從右往左打開，從左往右收回的Native路由切換體驗）
• present動畫切換（從下往上彈起，從上往下收回的Native路由模態切換體驗）
• 目前支持HashRouter，BrowserRouter兩種路由

整體上，基本能達到native路由的切換體驗，固然，畢竟是web頁面，相對於iOS的原生的native路由體驗仍是有點差距，感興趣的也能夠 運行完整demo體驗下。。。

react-router-virgo 使用手冊

一行代碼 + 一個路由配置文件，就能夠實現 react-router 的功能，並讓你的Web頁面切換達到匹配 Native 路由的轉場動畫體驗

1、概述

react-router-virgo是在 react-router 的基礎上進行二次封裝的 Router，使集成路由功能變得極其簡單，只須要 設置路由配置項和 添加 Router 兩步操做便可。此外，還增長了路由轉場動畫等擴展功能：

1. 經過設置組件Router的屬性useBrowserRouter，便可選擇路由類型：HashRouter，BrowserRouter
2. 經過設置路由配置文件RouterConfig.js的sceneConfig，便可選擇路由轉場過渡動畫類型：無轉場動畫、從右到左翻開的 push 轉場動畫、從下到上彈起的 present 轉場動畫

2、安裝 Router

### 使用npm
npm install --save react-router-virgo

### 使用yarn
yarn add react-router-virgo
複製代碼

3、 設置路由配置項

設置路由配置項 RouterConfig.js

3.1 代碼演示

import { Home, Detail, PushDetail, PresentDetail } from './pages/index';

// 例舉了無動畫、push轉場動畫、present轉場動畫三種場景
export const RouterConfig = [
  { path: '/', component: Home },
  // 無轉場動畫（新頁面直接覆蓋當前頁面）
  {
    path: '/detail/:type',
    component: Detail,
    sceneConfig: {
      enter: 'no-animation',
      exit: 'no-animation',
    },
  },
  // push 轉場動畫（打開時，從左往右覆蓋；關閉時，從右往左收回）
  {
    path: '/push/detail/:type/:id',
    component: PushDetail,
    sceneConfig: {
      enter: 'from-right',
      exit: 'to-right',
    },
  },
  // present 轉場動畫（打開時，從下往上彈起；關閉時，從上往下收起）
  {
    path: '/present/detail',
    component: PresentDetail,
    sceneConfig: {
      enter: 'from-bottom',
      exit: 'to-bottom',
    },
  },
];
複製代碼

3.2 配置項說明

key	說明	類型	默認值
path	路由路徑，能夠帶參數，在/:後的爲參數，如 /detail/:id， 參數爲 id	string		必傳
component	路由路徑映射的頁面組件	class		必傳
sceneConfig	路由轉場動畫配置，支持無動畫、push 動畫、present 動畫三種場景，默認使用 push 動畫	object	{enter: 'from-right', exit: 'to-right'}	可選
exact	是否使用精準匹配	bool	true	可選

• 路由轉場動畫參數sceneConfig配置，支持如下三種場景

1.無動畫配置：{
  enter: 'no-animation',
  exit: 'no-animation',
}
2.push動畫配置: {
  enter: 'from-right',
  exit: 'to-right',
}
3.present動畫配置: {
  enter: 'from-bottom',
  exit: 'to-bottom',
}
複製代碼

4、添加 Router

在入口文件App.js中添加Router

4.1 代碼演示

import React from 'react';
import Router from './router/Router';
import { RouterConfig } from './RouterConfig';
import './index.css';

function App() {
  // RouterConfig 爲路由配置文件
  return <Router routerConfig={RouterConfig} />; } export default App; 複製代碼

4.2 API 說明

屬性	說明	類型	默認值
routerConfig	路由配置數據	array	[]	必傳
useBrowserRouter	路由類型 BrowserRouter/HashRouter，默認使用 HashRouter	bool	false	可選
useAnimatedSwitch	是否使用轉場過渡動畫	bool	true	可選

若是

五. 常見問題

Q：支持哪些路由類型？

目前支持 BrowserRouter 和 HashRouter 兩種類型，可經過屬性useBrowserRouter來設置，默認使用 HashRouter

Q：支持哪些轉場動畫？

目前支持無動畫、從下往上彈起的 Present 動畫，從右往左打開的 Push 動畫三種場景。能夠在路由配置文件中按規則配置sceneConfig便可，若是未配置 sceneConfig 字段，則默認使用 Push 動畫

Q：打開新頁面後，上一級頁面是否會被銷燬？

會被銷燬，返回上一級頁面時，頁面會從新渲染，後續版本迭代會支持 Stack 路由功能。

Q：安裝後，編譯失敗的緣由？

確認下項目裏是否有 react-router-dom、react-transition-group 這 2 個依賴，若是沒有，請經過 yarn 或者 npm 引入依賴

yarn add react-router-dom react-transition-group
複製代碼

Q：是否支持 ts 開發的項目

後續迭代會支持

六. 其它

更具體的信息你們感興趣的話去看代碼吧，若是發現 bug，請提一個issue，我會第一時間進行修復和優化...

github: github.com/JackXJR/rea…

歡迎使用，以爲不錯請給一個小小的 star 鼓勵一下~