基于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 鼓励一下~