React Transition Group 阻止参数更改时的转换

Question

我的应用程序使用 '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>
      )}/>

Answer 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>
  )}/>

React Transition Group 阻止参数更改时的转换

React Transition Group prevent transition on param change

reactjs

react-router-v4

react-transition-group