Добрый день! Я использую библиотеку React Spring, а именно хук UseTransition для анимации перехода по страницам.
Ниже приведен код обёрнутых Routes для анимации:
export const AllRoutes = () => {
const location = useLocation()
const transitions = useTransition(location, {
from: {
opacity: 0,
transform: 'translate3d(100%,0,0)',
},
enter: {
opacity: 1,
transform: 'translate3d(0%,0,0)'
},
leave: {
opacity: 1,
transform: 'translate3d(-100%,0,0)'
},
})
return(
transitions((props, item) => (
<div style={{position: "absolute", left: '0', right: '0',}}>
<animated.div style={{ ...props}}>
<Routes location={item.pathname}>
<Route path="/pokemons/" element={<PokemonListPage/>}/>
<Route path="/pokemons/:id" element={<PokemonPage/>}/>
<Route path="/favorites" element={<FavoritePage/>}/>
<Route path="/search" element={<SearchPage/>}/>
</Routes>
</animated.div>
</div>
))
)
}
Анимация применяется, все хорошо. Но в одном из компонентов я использую ComponentWillUnMount, при этом очищается весь стор с данными для этой страницы
export const PokemonPage = () => {
let {id} = useParams<keyof myParams>() as myParams;
const dispatch = useAppDispatch()
const {isLoading, isError} = useAppSelector(state => state.pokemonReducer)
useEffect(() => {
dispatch(isFetchingPokemon(id))
console.log('mounted')
return () => {
dispatch(clearPokemon())
console.log('unmounted')
}
}, [id, dispatch])
if(isError){
return(
<Container>
<Error/>
</Container>
)
}
return (
<Container >
<Section>
{isLoading ? <PageLoader/> : <Pokemon id={id}/>}
</Section>
</Container>
)
}
Суть в том, что из за перехода анимации (opacity + transform), хук жизенного цикла срабатывает не так как нужно. При переходе на страницу PokemonPage (только другого покемона) он выполняет ComponentDidMount для новых данных, а потом выполняет ComponentWillUnMount, который был отложен.
Как пофиксить данную проблему? Может кто то сталкивался с подобным!