将react-router挂钩与react-transition-group一起使用会生成对组件的额外调用

Question

我正在尝试使用react @ 16.13.1，react-transition-group @ 4.3.0，react-router @ 5.1.2对我的网页进行编码...我正在使用react-router的新钩子之一（已路由和已转换的功能组件中的useParams，useLocation，useHistory）。在过渡超时持续时间之后，我得到了一个额外的渲染。如果删除了React-Router的一个或多个钩子，一切都很好，并且不会发生额外呼叫。

在我的“ BaseLayout”功能组件中：

 <TransitionGroup component={null}>
          <CSSTransition key={location.key} classNames="slide" timeout={3000}>
                        <Switch location={location}>

                            <Route path="/" exact children={<Home />} />

                            <Route
                            path="/:postType/:category/:year(\d{4})/:month(\d{2})/:day(\d{2})/:slug/:id/:pseudoId"

                children={<Post />}
              />
            </Switch>
          </CSSTransition>
  </TransitionGroup>

在我的“发布”功能组件中：

export default function Post(){

    let location = useLocation();//If I delete this line there is no log after 3000miliseconds (as expected )
    console.log("Hi from home");//After 3000miliseconds I get an other log
    return (

        <TransitionWrapper>
            <div>test</div>
        </TransitionWrapper>


    );

}