详解如何给React-Router添加路由页面切换时的过渡动画

那在React中应该如何给路由切换添加过渡动画呢？我们需要借助React的官方动画库react-transition-group，react-transition-group提供了三个React组件，分别是，以及，关于它们的详细api还请各位去查阅官方文档，这里只是简单介绍一下它们各自的用途：。关于react-transititon-group与react-router的结合使用方式，实际代码也非常的简单比如我们的路由长下面这个样子:我们需要写一个来实现的功能还要给路由跳转添加动画，其实也就是在外部用和再封装一层。我们原有的JSX可以更换成如下结构：至此，一个简单的组件的编写就完成了。