React Transition Group предотвращает переход на изменение параметров - PullRequest
Новая
       18

React Transition Group предотвращает переход на изменение параметров

0 голосов
/ 05 января 2019

Мое приложение использует 'response-transition-group' для маршрутизации между страницами, но каждый раз, когда обновляется идентификатор моего портфолио, оно перерисовывает весь компонент и запускает анимацию перехода. Как сделать так, чтобы при переходе на страницу моего портфолио он не рендерил компонент портфолио, когда изменяется только: 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>
      )}/>

1 Ответ

0 голосов
/ 12 января 2019

Я придумал какое-то хакерское решение, но оно работает. Мне пришлось создать регулярные выражения, которые ищут что-нибудь после / портфолио, а затем использовать его, чтобы определить, должен ли ключ быть пустым или нет. 

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