React Transition Group 防止参数更改时的转换答案

【问题标题】：React Transition Group prevent transition on param changeReact Transition Group 防止参数更改时的转换
【发布时间】：2019-05-31 14:20:57
【问题描述】：

我的应用程序使用“react-transition-group”在页面之间路由，但每次我的投资组合 id 更新时，它都会重新渲染整个组件并运行过渡动画。我怎样才能做到这一点，一旦你进入我的投资组合页面，当只有 :id 更改时它不会重新呈现投资组合组件？

<Route render={({ location }) => (
        <TransitionGroup>
          <CSSTransition key={location.key} classNames='slide' timeout={800}>
            <Switch location={location}>

              <Route exact path='/' component={Home}/>
              <Route path='/portfolio/:id?' component={Portfolio}/>
              <Route path='/about' component={About}/>

            </Switch>
          </CSSTransition>
        </TransitionGroup>
      )}/>

【问题讨论】：

你能创建 stackblitz 链接吗？
stackblitz.com/edit/react-xccpfh 这里是对问题的一个小重构
这可能会有所帮助，medium.com/onfido-tech/…

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

【解决方案1】：

我想出了一个有点老套的解决方案，但它确实有效。我必须创建一个正则表达式来查找 /portfolio 之后的任何内容，然后使用它来确定键是否应该为空。

constructor() {
    this.omittedLocations = ['/portfolio', '/about'];
    this.omitLocations = this.omitLocations.bind( this );
}

...

omitLocations( location ) {

let key = 'randomtext';

this.omittedLocations.forEach( url => {

  let urlRegex = new RegExp( url + '(.*)' );

  if ( key != '' ) {

    let result = urlRegex.exec( location.pathname );

    if ( result ) {
      if ( result[0] ) {
        key = '';
      } else {
        key = location.key;
      }
    } else {
      key = location.key;
    }

  }

});

return key;

}

...

<Route render={({ location }) => (
    <TransitionGroup>
      <CSSTransition key={this.omitLocations(location)} classNames='slide' timeout={800}>
        <Switch location={location}>

          <Route exact path='/' component={Home}/>
          <Route path='/portfolio/:id?' component={Portfolio}/>
          <Route path='/about' component={About}/>

        </Switch>
      </CSSTransition>
    </TransitionGroup>
  )}/>

【讨论】：