React Router 使用 TransitionGroup 抛出重定向警告答案

【问题标题】：React Router throwing redirect warnings with TransitionGroupReact Router 使用 TransitionGroup 抛出重定向警告
【发布时间】：2018-09-01 10:06:58
【问题描述】：

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

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

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

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

【问题讨论】：

嗯，删除 Switch 上的 location 属性似乎可以解决我的问题：codesandbox.io/s/w7j1kk8m17
嗨@ChaseDeAnda 不幸的是这会破坏动画。如果没有 location 属性，当前路由会立即更改。我放慢了原始沙箱中的动画以更好地说明。 codesandbox.io/s/ly9l09m22q 当您单击时，请注意动画出来的单词。
好吧，也许这就是你的问题 :) 听起来像 location 道具没有立即更新，并导致在更新之前触发多个重定向。
据我所知，location 正在正确更新。如果我在render 中将其注销，我会看到两次调用渲染和两个带有预期location.path 的日志，然后是上述警告中的3 个。如果我删除了 TransitionGroup 组件，我仍然会看到同样的两个日志（并且没有警告）。你能建议一种方法来检验你的理论吗？
嗨@FisNaN 感谢您的想法，但我们的现实世界用例更复杂，包含多个重定向。我们无法将它们全部删除。我希望有一个解决方案可以让我们一起使用转换和重定向。

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

【解决方案1】：

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

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

这种方法无需将location 属性传递给<Switch>——而是每个<CSSTransition/> 引用location。

查看示例：https://codesandbox.io/s/nn5r595joj

【讨论】：

有效！感谢您的帮助！