How to animate Reach Router Redirect with react-transition-group

177 Views Asked by At

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:

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?

0

There are 0 best solutions below