Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jackxjr/react-router-virgo
一行代码 + 一个路由配置文件，就可以实现 react-router 的功能，并让你的Web页面切换能媲美 Native 路由的转场动画体验。One line of code and one route configuration file, realize the function of react-router, and match the transition animation effect of native route.
https://github.com/jackxjr/react-router-virgo
react-animated-navigator react-animated-router react-navigator react-router react-router-animated react-router-animation router
Last synced: about 2 hours ago
JSON representation
一行代码 + 一个路由配置文件，就可以实现 react-router 的功能，并让你的Web页面切换能媲美 Native 路由的转场动画体验。One line of code and one route configuration file, realize the function of react-router, and match the transition animation effect of native route.
- Host: GitHub
- URL: https://github.com/jackxjr/react-router-virgo
- Owner: JackXJR
- Created: 2020-06-15T23:31:39.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T09:00:02.000Z (almost 2 years ago)
- Last Synced: 2024-11-15T03:17:45.130Z (1 day ago)
- Topics: react-animated-navigator, react-animated-router, react-navigator, react-router, react-router-animated, react-router-animation, router
- Language: JavaScript
- Homepage:
- Size: 24.5 MB
- Stars: 6
- Watchers: 1
- Forks: 5
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## react-router-virgo 使用手册
One line of code and one route configuration file, realize the function of `react-router`, and match the transition animation effect of native route.
一行代码 + 一个路由配置文件，就可以实现 `react-router` 的功能，并让你的 Web 页面切换媲美 Native 路由的转场动画体验
> 这里主要介绍怎么使用react-router-virgo，对实现原理感兴趣的小伙伴，可以去看我的这篇[技术博客](https://juejin.im/post/5eec73a5518825658d034976)
----
### 一、Brief Introduction 概述
> [react-router-virgo](https://github.com/JackXJR/react-router-virgo) is a router with secondary encapsulation based on `react-router`, which makes the integrated routing function extremely simple. In addition, the extended functions such as route transition animation are added: `No transition animation`, `push transition animation`, `present transition animation`
>
> [react-router-virgo](https://github.com/JackXJR/react-router-virgo)是在 react-router 的基础上进行二次封装的 Router，使集成路由功能变得极其简单。此外，还增加了路由转场动画等扩展功能：`无转场动画`, `Push 转场动画`, `Present 转场动画`，我们先来看看效果吧
- 无转场动画（现有的 web 页面切换体验）
- push 动画切换（右侧淡入，右侧淡出）
- present 动画切换（下方淡入，下方淡出的模态切换）
> 总体上，基本能达到 native 路由的切换体验，当然，毕竟是 web 页面，相对于 iOS 的原生的 native 路由体验还是有点差距，感兴趣的可以自己运行完整 demo 体验下。。。
### 二、Installation 安装
```
### use npm
### 使用npm
npm install --save react-router-virgo
### use yarn
### 使用yarn
yarn add react-router-virgo
```
### 三、RouterConfig 设置路由配置文件
> Set route profile `RouterConfig.js`
>
> 设置路由配置文件 `RouterConfig.js`
#### 3.1 Example 代码演示
```javascript
import { Home, Detail } from './pages/index'
// Three scenes are exemplified: no animation, push transition animation and present transition animation
// 例举了无动画、push转场动画、present转场动画三种场景
export const RouterConfig = [
{ path: '/', component: Home },
// No transition animation (the new page directly covers the current page)
// 无转场动画（新页面直接覆盖当前页面）
{
path: '/detail',
component: Detail,
sceneConfig: {
enter: 'no-animation',
exit: 'no-animation',
},
},
// Push transition animation (when opening the page, overwrite from left to right; when closing the page, withdraw from right to left)
// Push 转场动画（打开页面时，从左往右覆盖；关闭页面时，从右往左收回）
{
path: '/push/detail',
component: Detail,
sceneConfig: {
enter: 'from-right',
exit: 'to-right',
},
},
// Present transition animation (when opening the page, it will pop up from the bottom; when closing the page, it will pop up from the top)
// Present 转场动画（打开页面时，从下往上弹起；关闭页面时，从上往下收起）
{
path: '/present/detail',
component: Detail,
sceneConfig: {
enter: 'from-bottom',
exit: 'to-bottom',
},
},
]
```
#### 3.2 RouterConfig Description 配置项说明
| key | description | type | default | |
| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | ----------------------------------------- | ---------- |
| `path` | The routing path can take parameters. The one after `/:` is a parameter, such as `/ detail /: id`. The parameter is id. 路由路径，可以带参数，在`/:`后的为参数，如 `/detail/:id`， 参数为 id | string | | `Required` |
| `component` | Page components of route path mapping. 路由路径映射的页面组件 | class | | `Required` |
| `sceneConfig` | The route transition animation configuration supports three scenes: `no animation`, `push animation` and `present animation`. The default is push animation. 路由转场动画配置，支持`无动画`、`Push 动画`、`Present 动画`三种场景，默认使用 Push 动画 | object | `{enter: 'from-right', exit: 'to-right'}` | `Optional` |
| `exact` | Use exact match or not. 是否使用精准匹配 | bool | true | `Optional` |
- Routing transition animation parameter `sceneConfig` configuration supports the following three scenarios
- 路由转场动画参数`sceneConfig`配置，支持以下三种场景
```
### No animation configuration
### 无动画配置
{
enter: 'no-animation',
exit: 'no-animation',
}
### Push animation configuration
### Push动画配置
{
enter: 'from-right',
exit: 'to-right',
}
### Present animation configuration
### Present动画配置
{
enter: 'from-bottom',
exit: 'to-bottom',
}
```
### 四、Use Router 使用路由
> Add `Router` to entry file `App.js`
>
> 在入口文件`App.js`中添加`Router`
#### 4.1 Example 代码演示
```javascript
import React from 'react'
import Router from './router/Router'
import { RouterConfig } from './RouterConfig'
import './index.css'
function App() {
return
}
export default App
```
#### 4.2 API
| props | description | type | default | |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ----- | ------- | ---------- |
| `routerConfig` | Route configuration data. 路由配置数据 | array | [] | `Required` |
| `useBrowserRouter` | Routing type `BrowserRouter/HashRouter`. By default, HashRouter is used. 路由类型 `BrowserRouter/HashRouter`，默认使用 `HashRouter` | bool | false | `Optional` |
| `useAnimatedSwitch` | Use transition animation or not. 是否使用转场过渡动画 | bool | true | `Optional` |
### 五. FAQ 常见问题
> Q: Which routing types are supported?
> 支持哪些路由类型？
- Two types of `BrowserRouter` and `HashRouter` are supported. They can be set by the property `useBrowserRouter`. The default is HashRouter
- 目前支持 BrowserRouter 和 HashRouter 两种类型，可通过属性`useBrowserRouter`来设置，默认使用 HashRouter
> Q: What transition animations are supported?
> 支持哪些转场动画？
- It supports three kinds of scenes: no animation, pop-up presentation animation, and right to left push animation. You can configure `sceneConfig` according to rules in the routing configuration file. If the sceneConfig field is not configured, push animation is used by default
- 目前支持无动画、从下往上弹起的 Present 动画，从右往左打开的 Push 动画三种场景。可以在路由配置文件中按规则配置`sceneConfig`即可，如果未配置 sceneConfig 字段，则默认使用 Push 动画
> Q: After opening a new page, will the previous page be destroyed?
> 打开新页面后，上一级页面是否会被销毁？
- It will be destroyed. When returning to the previous page, the page will be re rendered, and the subsequent version iterations will support the stack routing function.
- 会被销毁，返回上一级页面时，页面会重新渲染，后续版本迭代会支持 Stack 路由功能。
> Q：Why does compilation fail after installation?
> 安装后，编译失败的原因？
- Confirm whether there are two dependencies `react-router-dom` and `react-transition-group` in your project. If not, please import the dependency through yarn or NPM.
- 确认下项目里是否有 `react-router-dom`、`react-transition-group` 这 2 个依赖，如果没有，请通过 yarn 或者 npm 引入依赖.
```
yarn add react-router-dom react-transition-group
```
> Q: Whether the project developed by TS is supported
> 是否支持 ts 开发的项目
- Subsequent iterations will support
- 后续迭代会支持
### 六. More 其它
If you are interested in more specific information, go to the code. If you find a bug, please mention an [issue](https://github.com/JackXJR/react-router-virgo/issues), I will repair and optimize it as soon as possible...
更具体的信息大家感兴趣的话去看代码吧，如果发现 bug，请提一个[issue](https://github.com/JackXJR/react-router-virgo/issues)，我会第一时间进行修复和优化...
> Welcome to use, if you think it's good, please give a little `star` encouragement~
>
> 欢迎使用，觉得不错请给一个小小的 `star` 鼓励一下~