My App component looks like this:
<TransitionGroup className={s.group}>
<CSSTransition key={location.key} timeout={150} classNames={classNames}>
<Router location={location} className={s.content}>
<MainScreen path={routes.main} />
<IntroductionScreen path={routes.introduction} />
<ProfileScreen path={routes.profile} />
<AuthScreen path={routes.auth} />
</Router>
</CSSTransition>
</TransitionGroup>
It works well, but when I return Redirect component from ProfileScreen component, the animation doesn't work and I get the following error:
My ProfileScreen component:
const ProfileScreen: FunctionComponent<RouteComponentProps> = (props) => {
const location = useLocation();
const urlParams = new URLSearchParams(location.search.substring(1));
const token = urlParams.get('token');
useEffect(() => {
if (!token) {
redirectTo(routes.auth);
}
}, [token]);
return (
<>
<h1>Hello!</h1>
</>
);
};
What is the reason for the exception? How can I make the animation work?
