react-transition-group &react路由器refNode

Question

我正在使用react-transition-group在react-router中的页面之间生成传输动画。

当我不使用nodeRef={nodeRef}动画时，效果很好，但我得到了这个错误：

"findDOMNode在StrictMode中已弃用。向findDOMNode传递了一个位于StrictMode内部的转换实例。请改为直接向要引用的元素添加引用。请在此处了解有关安全使用引用的详细信息: fb.me/react-strict-mode-find-node“

当我使用nodeRef={nodeRed}动画不工作，但我没有得到一个错误。

如何在不出错的情况下进行动画制作

import React, { useRef } from 'react';
import { TransitionGroup, CSSTransition } from 'react-transition-group';

const nodeRef = useRef(null)

       <Route render={({location}) => (

       <TransitionGroup>
         <CSSTransition nodeRef={nodeRef} key={location.key} timeout={2000} classNames="fade">

         <Switch location={location}>

           <Route path='/' exact component={Home}/>
           <Route path='/about' component={About}/>
           <Route path='/skills' component={Skills}/>
           <Route path='/projects' component={Projects}/>
           <Route path='/contact' component={Contact}/>

         </Switch>

         </CSSTransition>
     </TransitionGroup>

   )} />

   </Router>```

Answer 1

我也一直有这个问题。然后我在react-transition-group文档中找到了这个页面，它基本上建议您在处理react-router时完全避免使用TransitionGroup，而只是将路由呈现的所有组件直接包装在CSSTransition中。链接在这里：http://reactcommunity.org/react-transition-group/with-react-router/

如果链接在将来中断，下面是相关的部分：

用户通常希望将路由转换动画化，这可以在适度使用时产生令人愉悦的用户体验。第一种方法可能是在TransitionGroup中使用包装所有路由，但这种方法需要修改，当与Redirect等更复杂的React路由器组件一起使用时，很容易崩溃。您应该为每条路由使用CSSTransition，并自行管理它们的in prop。

主要的挑战是退出转换，因为React Router会立即更改为新路由，因此我们需要保留旧路由足够长的时间才能将其转换出来。幸运的是，Route的子属性也接受一个函数，不应该与渲染属性混淆！与渲染属性不同，子属性会在路由匹配与否的情况下运行。React路由器传递包含match对象的对象，如果路由匹配则该对象存在，否则为null。这使我们能够根据存在的match来管理CSSTransition的in属性。

还有一个演示应用程序，我不会全部分享，但这里是关于<Route>的相关部分：

<Route key={path} exact path={path}>
  {({ match }) => (
    <CSSTransition
      in={match != null}
      timeout={300}
      classNames="page"
      unmountOnExit
    >
      <div className="page">
        <Component />
      </div>
    </CSSTransition>
  )}
</Route>

Answer 2

我认为这是你的错误：

nodeRef = useRef(null)

应该是：

nodeRef = React.useRef(null)