使用 react-transition-group实现react路由动画实现后为什么出现两个

可能是因为你没有正确配置 `react-transition-group`。

首先，确保你已经正确引入了 `react-transition-group` 库，并且按照官方文档中的方式使用了 `TransitionGroup` 和 `CSSTransition` 组件。

然后，你需要注意以下几点：

1. 确保你的路由组件都被包裹在 `CSSTransition` 组件中，并设置 `classNames` 属性来指定动画类名。

2. 确保你的路由组件都有唯一的 `key` 属性，这个属性在路由切换时会被用到。

3. 如果你在使用 `Switch` 组件来渲染路由，注意把 `Switch` 组件放在 `TransitionGroup` 组件的内部。

如果你已经按照以上步骤进行了配置，但是仍然出现了两个动画的问题，可能是因为你的路由组件存在嵌套关系，这时候需要在父级路由组件上设置 `appear={true}` 和 `unmountOnExit={true}` 属性来避免出现重复动画。

希望这些信息能够帮助你解决问题。

相关问题

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动画库，可以实现各种炫酷的路由切入动画。

react-router-dom6.8。跳转路由闪烁一下屏幕

这个问题一般是由于页面重新渲染导致的。React 组件的重新渲染是一种非常普遍的现象，因此，当我们进行路由跳转时，页面会重新渲染一次，从而导致闪烁的问题。

为了解决这个问题，你可以尝试使用 React 的 `React.memo` 高阶组件来优化组件的渲染性能。此外，你还可以使用 CSS 过渡动画来平滑过渡页面的切换，例如使用 `transition` 属性或者使用动画库（如 `react-transition-group`）。

另外，你还可以尝试使用 `React.lazy` 和 `Suspense` 来延迟加载组件，以减少首次加载时的渲染时间。

最后，如果你仍然无法解决闪烁问题，可以尝试使用其他路由库，如 `reach-router` 或 `wouter`，来看看是否有所改善。