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防止在参数更改时进行过渡

1 个答案: