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

Мое приложение использует «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>
      )}/>

Можете ли вы создать ссылку на stackblitz?

Just code 05.01.2019 05:02
stackblitz.com/edit/react-xccpfh вот небольшая реконструкция вопроса
Tino 05.01.2019 06:52

это может быть полезно, medium.com/onfido-tech/…

Just code 05.01.2019 09:03
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
3
471
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

Другие вопросы по теме