Мое приложение использует «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>
)}/>
это может быть полезно, medium.com/onfido-tech/…





Я придумал хакерское решение, но оно работает. Мне пришлось создать регулярные выражения, которые ищут что-либо после / портфолио, а затем использовать его, чтобы определить, должен ли ключ быть пустым или нет.
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>
)}/>
Можете ли вы создать ссылку на stackblitz?