使用 react-transition-group 转换子路由时无法阻止父路由转换

Question

我有一个用 React 和 React Router 制作的聊天应用程序我使用 React 过渡组来在聊天之间设置动画，但问题是我在聊天中有图片，我想在用户点击时将它们显示给用户在他们身上，也想用一条路线来做，并像在任何聊天应用程序中一样对其进行动画处理，但作为聊天的父路线动画化了。

这就像当路线从 "/chat/:chatID" 变为 "/chat/:chatID/image" 时它会动画化我看到了很多解决方案但是 none 对我有用而且我真的沮丧和愤怒我不明白为什么 React 路由器的创建者没有给我们一个选项，让我们在需要时为组件设置动画。

聊天组件路由代码如下：

        <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>

聊天组件中图片预览路由的代码如下：

        <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>

如你所见，我访问了 location.pathname 并检查它是否有图像路径，如果有，我会将密钥设置为 null 但组件仍然有动画，我可以看到它，它只动画出来但不是在我希望组件在我转到 /image 时不动画并且图像将以动画呈现。

此外，当我退出应该向用户显示图像的图像预览组件时，聊天组件仅在没有动画的情况下进行动画处理。所以请帮助我，我真的厌倦了 React 路由器！！！

Answer 1

我找到了解决方案！！！：

    <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>

这很简单 CSSTransition 会在键改变时触发动画，所以如果键改变，它会为前一个键的组件制作动画，然后在新键的组件中制作动画，所以当我从 /chat/:chatID 到 /chat/:chatID/image 它将动画化聊天组件然后动画化，因为密钥发生变化所以解决方案是检查路径是否有 /image 以及是否像我一样删除它 location.pathname.replace("/image","") 因此，如果您想为嵌套路由设置动画，您应该删除父路由中这些路由的路径，这样它就不会检测到路径更改，如果您有很多子路由，请创建一个函数，从完整路径中删除所有嵌套路径. 我希望我帮助别人告诉我你的想法，如果它在评论中对你有用 :))

使用 react-transition-group 转换子路由时无法阻止父路由转换

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

javascript

reactjs

react-router

react-transition-group