简介
react-router-dos 是一个基于 react-router 的扩展，它允许我们在路由切换时使用过度动画，从而改善用户体验。它使用了另一个 npm 包 react-transitions 作为其底层动画库。
本文将详细介绍如何使用 react-router-dos 实现页面切换过度效果。
安装
我们可以使用 npm 或 yarn 安装 react-router-dos。
通过 npm 安装：
npm install react-router-dos --save
通过 yarn 安装：
yarn add react-router-dos
使用
定义动画
react-router-dos 提供了一些组件作为动画的基础，我们可以使用它们来自定义动画。
-- -------------------- ---- -------
------ - ------------- - ---- --------------------
------ ----- ---- --------
------ ----- --------- - ------- -- -
--------------
----------
-------------
--------------------
------------
-------------
--
--以上是 SlideDown 组件的定义，它是一个向下滑动的过渡效果，当使用 SlideDown 组件进行路由切换时，它会产生一个向下滑动的动画效果，时长为 400ms。
包装基础路由
我们使用 react-router 的基础路由组件 BrowserRouter 作为 react-router-dos 的基础，然后将我们定义好的动画组件作为它的子路由组件。如下：
-- -------------------- ---- -------
------ - ------------- - ---- -------------------
------ - --------- - ---- ----------------
------ - -------------- - ---- -------------------
------ ----- ---- --------
----- --- - -- -- -
---------------
-----------
----------------
------ ---------------- ----- -------- --
------ ----------------- ------------- --
------ ----------------- ------------- --
------ ------------------- --------------- --
-----------------
------------
----------------
--在上面的代码中，AnimatedSwitch 是 react-router-dos 提供的路由组件，我们可以将它看作是 react-router 的 Switch 组件，这里我们将其包装在 SlideDown 组件内，以实现切换动画效果。
示例
下面是一个完整的实现示例，大家可以参考使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- ----- - ---- -------------------
------ - ------------- - ---- --------------------
------ - -------------- - ---- -------------------
------ ------------
----- --------- - ------- -- -
--------------
----------
----------------------
-------------
------------
-------------
--
--
----- ---- - -- -- -
-----
-------------
---------- -- --- ---- ---------
------
--
----- ----- - -- -- -
-----
--------------
---------- -- --- ----- ---------
------
--
----- ----- - -- -- -
-----
--------------
---------- -- --- ----- ---------
------
--
----- ------- - -- -- -
-----
----------------
---------- -- --- ------- ---------
------
--
----- --- - -- -- -
---------------
-----------
----------------
------ ---------------- ----- -------- --
------ ----------------- ------------- --
------ ----------------- ------------- --
------ ------------------- --------------- --
-----------------
------------
----------------
--
------ ------- ----总结
通过本文的介绍，我们学习了如何使用 react-router-dos 实现页面切换过渡效果。react-router-dos 是一个非常实用的 npm 包，可以很好地改善我们的用户体验，希望大家可以在实际开发中运用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562bc81e8991b448dffe0