reactjs - React Router 使用 TransitionGroup 抛出重定向警告

Question

我正在使用 React Router 和 React Transition Group 在路由之间设置动画。我在使用<Redirect />组件时遇到问题。该应用程序有效，但我从 React Router 收到多个警告，内容如下：

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

您可以在此Code Sandbox中看到它发生的情况。确保打开沙盒控制台，然后输入错误的路径（如 codesandbox.io/abc）。

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

Answer 1

<Redirect>当动画组件中的挂载时会出现此问题。

不要将动画组件包装在 周围<Switch>，而是包装<Route>的子组件。（您可能需要使用<Route>'render道具与其component道具。）

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

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