react react-router-config 路由切入动画

React Router是React的一种路由管理工具，它允许我们在应用程序中建立路由，并通过不同的URL路径来加载不同的页面。

而react-router-config是React Router的一个附加库，它提供了一种以配置方式来定义应用程序路由的方法。

路由切入动画是指在切换页面时，为页面添加一些过渡效果和动画，以提升用户体验。

使用react-router-config实现路由切入动画的步骤如下：
1. 首先，在路由配置文件中定义各个页面的路由信息，并设置对应的组件。
2. 在路由配置文件中，为每个路由定义一个transition属性，用于标识该路由的过渡效果。
3. 在根组件中使用React Router提供的Switch组件来包裹所有路由，并使用TransitionGroup组件来包裹Switch组件。
4. 在根组件中使用自定义的AnimatedSwitch组件来替换React Router提供的Switch组件，并将路由配置文件传递给AnimatedSwitch组件。
5. 在AnimatedSwitch组件中根据当前路由的transition属性，为切换的页面添加不同的过渡效果和动画。

例如，可以定义一个FadeIn动画效果，在路由配置文件中为需要应用该动画效果的路由设置transition属性为'fade-in'，然后在AnimatedSwitch组件中根据该属性为页面添加相应的CSS动画样式。

总而言之，使用react-router-config可以方便地配置应用程序的路由信息，并结合一些CSS动画库，可以实现各种炫酷的路由切入动画。