{"id":19805333,"url":"https://github.com/qiqiboy/react-animated-router","last_synced_at":"2025-04-22T21:42:39.216Z","repository":{"id":31885558,"uuid":"130462197","full_name":"qiqiboy/react-animated-router","owner":"qiqiboy","description":"Dynamic transitions with react-router(v6) and react-transition-group","archived":false,"fork":false,"pushed_at":"2024-09-27T12:27:40.000Z","size":293,"stargazers_count":60,"open_issues_count":8,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-17T21:44:10.081Z","etag":null,"topics":["animated-transitions","animation-library","nested-router","react-animation","react-router","react-router-motion","react-router-v6","react-slide-router","react-transition-group","router-animation"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qiqiboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-21T10:11:55.000Z","updated_at":"2025-02-23T18:40:37.000Z","dependencies_parsed_at":"2025-02-17T22:46:49.227Z","dependency_job_id":"28cd169d-d3e5-453d-9c95-4243d0def2c7","html_url":"https://github.com/qiqiboy/react-animated-router","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-animated-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-animated-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-animated-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-animated-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiqiboy","download_url":"https://codeload.github.com/qiqiboy/react-animated-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250330262,"owners_count":21412953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated-transitions","animation-library","nested-router","react-animation","react-router","react-router-motion","react-router-v6","react-slide-router","react-transition-group","router-animation"],"created_at":"2024-11-12T09:03:26.144Z","updated_at":"2025-04-22T21:42:39.190Z","avatar_url":"https://github.com/qiqiboy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-animated-router\n\nreact 路由切换动画，支持嵌套路由 (nested routers)和动态路由（dynamic routers），对于`react-router-dom@6.x`的路由嵌套有较好的支持，开箱即用！\n\n\u003e 当前版本要求`react-router-dom`为`v6`版本，如果您还在使用`v4`或`v5`，请查看安装 [react-animated-router@0.2.4](https://github.com/qiqiboy/react-animated-router/tree/0.2.4)\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n- [安装](#安装)\n- [如何使用](#如何使用)\n    + [`AnimatedRoutes`组件模式调用](#animatedroutes组件模式调用)\n    + [`useAnimatedRoutes` Hooks 调用](#useanimatedroutes-hooks-调用)\n    + [配置参数说明](#配置参数说明)\n- [自定义动画](#自定义动画)\n- [FAQ](#faq)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n### 安装\n\n```bash\nnpm install react-animated-router@latest --save\n```\n\n你可以直接通过`npm/yarn`安装，依赖包里带一个左右滑入滑出效果的`animate.css`，如果要使用该效果，需要在项目中一并引入。\n\n```javascript\nimport { AnimatedRoutes, useAnimatedRoutes } from 'react-animated-router'; //导入我们的的AnimatedRoutes组件或者useAnimatedRoutes\nimport 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件\n```\n\n如果想要自定义切换效果，可以将`animate.css`复制进自己的项目，并修改其中的动画样式定义（基于 css3 transition），并引入到项目中。\n\n\u003e #### 小技巧\n\u003e\n\u003e 如果路由在多个页面文件中都有定义，为了避免每次都需要同时导入 react-animated-router 和 animate.css（如果只有一处引入 animate.css，其它地方不引入的话，在有 code split 的项目中，可能会有样式丢失），有两种办法可以优化：\n\u003e\n\u003e -   一，将`animate.css`在入口文件中引入，其它地方可以只引用 react-animated-router\n\u003e -   二，将 react-animated-router 和 animate.css 包装到一个模块文件中再默认导出，在其他地方引用该新模块：\n\n```javascript\n// 自己项目中的AnimatedRouter模块\nimport 'react-animated-router/animate.css'; //导入样式文件\n\nexport { default } from './AnimatedRoutes'; // 注：这是为了兼容老版本，从v1.2.4开始，AnimatedRoutes支持子导出，但是同时也保留了默认导出语法\nexport * from './AnimatedRoutes';\n```\n\n然后就可以直接引用该文件来使用 `AnimatedRoutes` 和 `useAnimatedRoutes`了，不必每次都引入`animate.css`。\n\n### 如何使用\n\n`react-animated-router`提供了与`Routes`和`useRoutes`类似的组件和 hooks 两种用法：\n\n#### `AnimatedRoutes`组件模式调用\n\n`AnimatedRoutes`是一个标准的 React 组件，它可以给一组`Route`组件增加动画切换效果，将它放入你的项目中，然后在需要支持动画的地方，使用`AnimatedRoutes`替换你的`Routes`组件即可。\n\n```javascript\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport { AnimatedRoutes } from 'react-animated-router';\nimport 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件\n\nimport Login from 'modules/Login';\nimport Signup from 'modules/Signup';\nimport NestLayout from 'modules/NestLayout';\nimport Nested from 'modules/Nested';\n\nfunction App() {\n    /** 假如你的代码如此，则可直接使用最下方代码代替，即直接使用 AnimatedRoutes 替换掉 Routes\n     * return (\n     *  \u003cRoutes\u003e\n     *       \u003cRoute path=\"login\" element={\u003cLogin /\u003e} /\u003e\n     *       \u003cRoute path=\"signup\" element={\u003cSignup /\u003e} /\u003e\n     *       \u003cRoute path=\"nested\" element={\u003cNestLayout /\u003e}\u003e\n     *           \u003cRoute path=\"1\" element={\u003cNested id=\"1\" /\u003e} /\u003e\n     *           \u003cRoute path=\"2\" element={\u003cNested id=\"2\" /\u003e} /\u003e\n     *       \u003c/Route\u003e\n     *   \u003c/Routes\u003e\n     * );\n     **/\n\n    return (\n        \u003cAnimatedRoutes\u003e\n            \u003cRoute path=\"login\" element={\u003cLogin /\u003e} /\u003e\n            \u003cRoute path=\"signup\" element={\u003cSignup /\u003e} /\u003e\n            \u003cRoute path=\"nested\" element={\u003cNestLayout /\u003e}\u003e\n                \u003cRoute path=\"1\" element={\u003cNested id=\"1\" /\u003e} /\u003e\n                \u003cRoute path=\"2\" element={\u003cNested id=\"2\" /\u003e} /\u003e\n            \u003c/Route\u003e\n        \u003c/AnimatedRoutes\u003e\n    );\n}\n\nrender(\n    \u003cBrowserRouter\u003e\n        \u003cApp /\u003e\n    \u003c/BrowserRouter\u003e,\n    document.querySelector('#root')\n);\n```\n\n#### `useAnimatedRoutes` Hooks 调用\n\n```typescript\ndeclare function useAnimatedRoutes(routes: RouteObject[], props?: AnimatedRoutesProps): React.ReactElement | null;\n```\n\n你可以将项目中的`useRoutes`使用`useAnimatedRoutes`代替，就可以给页面切换带来动画效果！\n\n```javascript\nimport React, { Component } from 'react';\nimport { render } from 'react-dom';\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\nimport { useAnimatedRoutes } from 'react-animated-router'; //导入我们的的useAnimatedRoutes hook\nimport 'react-animated-router/animate.css'; //导入默认的切换动画样式，如果需要其它切换样式，可以导入自己的动画样式定义文件\n\nimport Login from 'modules/Login';\nimport Signup from 'modules/Signup';\nimport NestLayout from 'modules/NestLayout';\nimport Nested from 'modules/Nested';\n\nfunction App() {\n    return useAnimatedRoutes([\n        { path: 'login', element: \u003cLogin /\u003e },\n        { path: 'signup', element: \u003cSignup /\u003e },\n        {\n            path: 'nested',\n            element: \u003cNestLayout /\u003e,\n            children: [\n                { path: '1', element: \u003cNested id=\"1\" /\u003e },\n                { path: '2', element: \u003cNested id=\"2\" /\u003e }\n            ]\n        }\n    ]);\n}\n\nrender(\n    \u003cBrowserRouter\u003e\n        \u003cApp /\u003e\n    \u003c/BrowserRouter\u003e,\n    document.querySelector('#root')\n);\n```\n\n#### 配置参数说明\n\n```typescript\n// TransitionActions 为 react-transition-group 定义\ninterface AnimatedRoutesProps extends TransitionActions {\n    className?: string;\n    timeout?: number;\n    prefix?: string;\n    component?: React.ElementType | null;\n    location?: Partial\u003cLocation\u003e | string;\n}\n```\n\n主要参数说明：\n\n|   属性    |           类型            |      默认值       | 描述                                                                                                                                                                                            |\n| :-------: | :-----------------------: | :---------------: | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n|  prefix   |      `string`，可选       | `animated-router` | 应用到 CSSTransition 组件的 classNames 前缀。如果要在同一个项目中使用不同的动画，可以通过设置前缀来定义不同的动画。关于如何自定义动画，请查看下方说明                                           |\n|  timeout  |      `number`，可选       |        无         | 动画持续时间（毫秒），可以不传，默认为监听 transitionend 时间来判断动画结束。如果有动画异常，可以尝试设置该值，需要注意的是，该值应该与动画样式中定义的过渡时间一致                             |\n| className |      `string`，可选       |        无         | 如果传入 className 则会添加到动画节点所在容器节点上                                                                                                                                             |\n| component |      `boolean`，可选      |       'div'       | AnimatedRoutes 默认会 render 一个 div 节点，你可以通过该字段修改 render 的节点类型，例如，`component=\"section\"`将会 render `\u003csection\u003e`节点。在 react v16+中，可以传入 `null` 来避免渲染该节点。 |\n|  appear   |      `boolean`，可选      |       false       | [文档：appear](http://reactcommunity.org/react-transition-group/transition-group#TransitionGroup-prop-appear)：是否启用组件首次挂载动画（启用的话将会触发 enter 进场动画）                      |\n|   enter   |      `boolean`，可选      |       true        | [文档：enter](http://reactcommunity.org/react-transition-group/transition-group#TransitionGroup-prop-enter)：是否启用进场动画                                                                   |\n|   exit    |      `boolean`，可选      |       true        | [文档：exit](http://reactcommunity.org/react-transition-group/transition-group#TransitionGroup-prop-exit)：是否启用离场动画                                                                     |\n| location  | `Location` `string`，可选 |   当前页面地址    | 等同于`Routes`的同名属性，一般无需指定，除非你要渲染匹配与当前页面地址不一样路由                                                                                                                |\n\n### 自定义动画\n\n如果不希望使用左右滑入动画，则可以自定义自己的路由动画。可以将默认的 animate.scss(css) 复制进自己的项目，然后修改不同阶段的样式值即可。\n\n页面分为前进(forward)和后退(backward)，两者分别会应用不同的 classNames 到`react-transition-group`的[CSSTransition](http://reactcommunity.org/react-transition-group/css-transition)组件。关于 classNames 的更多用法，请参考[官方文档](http://reactcommunity.org/react-transition-group/css-transition)。\n\n默认的 classNames 如下，如果你设置了 prefix，则名称会变为 `{prefix}-forward` / `{prefix}-backward`。\n\n| classNames               | 解释               |\n| ------------------------ | ------------------ |\n| animated-router-forward  | 页面前进时动画效果 |\n| animated-router-backward | 页面后退时动画效果 |\n\n同时，如果没有设置`componnt={null}`的话，AnimateRouter 将会渲染一个路由页面容器节点，该节点会有一些 className，可以用来辅助做动画定义。\n\n| 容器节点 className            | 解释                                                           |\n| ----------------------------- | -------------------------------------------------------------- |\n| animated-router-container     | 总是存在                                                       |\n| animated-router-in-transition | 路由动画进行中时存在，可以用来设置动画切换中的一些节点样式设置 |\n\n### FAQ\n\n-   **Q: 动画执行异常？**  \n    A: 可以尝试设置 timeout 属性，并保持与动画样式中定义的过渡时间一致（默认的 animate.scss 中为 300）\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-animated-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiqiboy%2Freact-animated-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-animated-router/lists"}