Cannot prevent parent route from transitioning when transitioning a child route with react-transition-group

Question

I have a chat application made with react and react router I used react transition group in order to animate between chats but the problem is that I have pictures in the chats and I wanted to display them to the user when he clicks on them and also wanted to do it with a route and animate it like in any chat app but the parent route which is the chat animates out.

It's like when the route changes from "/chat/:chatID" to "/chat/:chatID/image" it animates out I saw a lot of solutions to this but none of them worked for me and I'm really upset and angry I don't understand why react router creators didn't give us an option to animate out the component when we want.

Here's the code of chat component Route:

        <TransitionGroup component={null}>
            <CSSTransition
                timeout={300}
                classNames="page"
                key={!location.pathname.includes("/image") ? location.pathname : null}
            >
                <Route path={`${path}/room/:roomID`} location={location}>
                    <chat
                        unreadMessages={unreadMessages}
                        animState={state} 
                        imagePreview={imagePreview}
                        setImagePreview={setImagePreview}
                    />
                </Route>        
            </CSSTransition>
        </TransitionGroup>

Here's the code of of the image preview Route which is inside chat component:

        <TransitionGroup component={null}>
            <CSSTransition
                timeout={300}
                classNames="page"
                key={location.pathname}
            >
                <Route path={path + "/image"} location={location}>
                    <ImagePreview
                        setImagePreview={setImagePreview}
                        imagePreview={imagePreview}
                        path={path}
                        animState={animState}
                    />
                </Route>    
            </CSSTransition>
        </TransitionGroup>

As you can see I access the location.pathname and check if it has the image route if it does I will put the key as null But still the component animates and I can see it and It only animates out but not in I want the component to not animate when I go to /image and the image will render with animation.

Also when I exit the image preview component which is supposed to show the image to user the chat component only animate in without out animation. So please help me I'm really sick of react router!!!

Boubekeur Alaa Eddine · Accepted Answer · 2021-01-05T05:24:40.477

I found the solution !!!:

    <TransitionGroup component={null}>
        <CSSTransition
            timeout={300}
            classNames="page"
            key={location.pathname.replace("/image", "")}
        >
            <Route path={`${path}/room/:roomID`} location={location}>
                <chat
                    unreadMessages={unreadMessages}
                    animState={state} 
                    imagePreview={imagePreview}
                    setImagePreview={setImagePreview}
                />
            </Route>        
        </CSSTransition>
    </TransitionGroup>

It's very simple CSSTransition will fire an animation if the key changes so if it changes It will animate out the component of the previous key and then animates in the component of the new key so when I go from /chat/:chatID to /chat/:chatID/image it will animates out the chat component then animates in because the key changes so the solution is to check if the path has /image and if it does delete it as I did location.pathname.replace("/image","") So if you want to animate nested routes you should delete the path to these routes in you parent route so it doesn't detect the path change and if you have a lot of children routes create a function that delete all nested path from the full path . I hope I helped somebody tell me what you think and if it works for you in the comments :))

Cannot prevent parent route from transitioning when transitioning a child route with react-transition-group

1 Answers1