React Router使用TransitionGroup

时间:2018-03-22 20:12:26

标签: reactjs react-router react-transition-group

我正在使用具有React Transition Group的React Router在路由之间进行动画处理。我使用<Redirect />组件时遇到问题。该应用程序可以工作,但我收到来自React Router的多个警告:

  

警告:您尝试重定向到您当前所在的路线:“/”

您可以在此Code Sandbox中看到它。确保打开沙箱控制台,然后输入错误的路径(如codesandbox.io/abc)。

我尝试按照他们在文档中提供的示例(https://reacttraining.com/react-router/web/example/animated-transitions),但这不包括重定向。有没有更好的方法来使用重定向和转换来避免警告?

1 个答案:

答案 0 :(得分:4)

<Redirect>安装在动画组件中时,会出现此问题。

不是将动画组件包裹在<Switch>周围,而是包装<Route>的子组件。 (您可能需要使用<Route>的{​​{1}}道具与其render道具。)

此方法消除了将component道具传递给location的需要 - 而不是每个<Switch>引用<CSSTransition/>

参见示例:https://codesandbox.io/s/nn5r595joj