react-animated-router

react 路由切换动画，支持嵌套路由 (nested routers)和动态路由（dynamic routers），对于react-router-dom@6.x的路由嵌套有较好的支持，开箱即用！

> 当前版本要求react-router-dom为v6版本，如果您还在使用v4或v5，请查看安装 react-animated-router@0.2.4

- 安装
- 如何使用
+ AnimatedRoutes组件模式调用
+ useAnimatedRoutes Hooks 调用
+ 配置参数说明
- 自定义动画
- FAQ

$3

``bash
npm install react-animated-router@latest --save
`

你可以直接通过npm/yarn安装，依赖包里带一个左右滑入滑出效果的animate.css，如果要使用该效果，需要在项目中一并引入。

`javascript
import { AnimatedRoutes, useAnimatedRoutes } from 'react-animated-router'; //导入我们的的AnimatedRoutes组件或者useAnimatedRoutes
import 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件
`

如果想要自定义切换效果，可以将animate.css复制进自己的项目，并修改其中的动画样式定义（基于 css3 transition），并引入到项目中。

> #### 小技巧
>
> 如果路由在多个页面文件中都有定义，为了避免每次都需要同时导入 react-animated-router 和 animate.css（如果只有一处引入 animate.css，其它地方不引入的话，在有 code split 的项目中，可能会有样式丢失），有两种办法可以优化：
>
> - 一，将animate.css在入口文件中引入，其它地方可以只引用 react-animated-router
> - 二，将 react-animated-router 和 animate.css 包装到一个模块文件中再默认导出，在其他地方引用该新模块：

`javascript
// 自己项目中的AnimatedRouter模块
import 'react-animated-router/animate.css'; //导入样式文件

export { default } from './AnimatedRoutes'; // 注：这是为了兼容老版本，从v1.2.4开始，AnimatedRoutes支持子导出，但是同时也保留了默认导出语法
export * from './AnimatedRoutes';
`

然后就可以直接引用该文件来使用 AnimatedRoutes 和 useAnimatedRoutes了，不必每次都引入animate.css。

$3

react-animated-router提供了与Routes和useRoutes类似的组件和 hooks 两种用法：

#### AnimatedRoutes组件模式调用

AnimatedRoutes是一个标准的 React 组件，它可以给一组Route组件增加动画切换效果，将它放入你的项目中，然后在需要支持动画的地方，使用AnimatedRoutes替换你的Routes组件即可。

`javascript
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AnimatedRoutes } from 'react-animated-router';
import 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件

import Login from 'modules/Login';
import Signup from 'modules/Signup';
import NestLayout from 'modules/NestLayout';
import Nested from 'modules/Nested';

function App() {
/** 假如你的代码如此，则可直接使用最下方代码代替，即直接使用 AnimatedRoutes 替换掉 Routes
* return (
*
* } />
* } />
* }>
* } />
* } />
*
*
* );
**/

return (

} />
} />
}>
} />
} />


);
}

render(


,
document.querySelector('#root')
);
`

#### useAnimatedRoutes Hooks 调用

`typescript
declare function useAnimatedRoutes(routes: RouteObject[], props?: AnimatedRoutesProps): React.ReactElement | null;
`

你可以将项目中的useRoutes使用useAnimatedRoutes代替，就可以给页面切换带来动画效果！

`javascript
import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useAnimatedRoutes } from 'react-animated-router'; //导入我们的的useAnimatedRoutes hook
import 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件

import Login from 'modules/Login';
import Signup from 'modules/Signup';
import NestLayout from 'modules/NestLayout';
import Nested from 'modules/Nested';

function App() {
return useAnimatedRoutes([
{ path: 'login', element: },
{ path: 'signup', element: },
{
path: 'nested',
element: ,
children: [
{ path: '1', element: },
{ path: '2', element: }
]
}
]);
}

render(


,
document.querySelector('#root')
);
`

#### 配置参数说明

`typescript
// TransitionActions 为 react-transition-group 定义
interface AnimatedRoutesProps extends TransitionActions {
className?: string;
timeout?: number;
prefix?: string;
component?: React.ElementType | null;
location?: Partial | string;
}
`

主要参数说明：

| 属性 | 类型 | 默认值 | 描述 |
| :-------: | :-----------------------: | :---------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| prefix | string，可选 | animated-router | 应用到 CSSTransition 组件的 classNames 前缀。如果要在同一个项目中使用不同的动画，可以通过设置前缀来定义不同的动画。关于如何自定义动画，请查看下方说明 |
| timeout | number，可选 | 无 | 动画持续时间（毫秒），可以不传，默认为监听 transitionend 时间来判断动画结束。如果有动画异常，可以尝试设置该值，需要注意的是，该值应该与动画样式中定义的过渡时间一致 |
| className | string，可选 | 无 | 如果传入 className 则会添加到动画节点所在容器节点上 |
| component | boolean，可选 | 'div' | AnimatedRoutes 默认会 render 一个 div 节点，你可以通过该字段修改 render 的节点类型，例如，component="section"将会 render