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

【问题标题】：Cannot prevent parent route from transitioning when transitioning a child route with react-transition-group使用 react-transition-group 转换子路由时无法阻止父路由转换
【发布时间】：2021-01-02 20:27:36
【问题描述】：

我有一个使用 react 和 react 路由器制作的聊天应用程序，我使用 react 过渡组在聊天之间制作动画，但问题是我在聊天中有图片，我想在用户点击它们时将它们显示给用户并且还想用一条路线来做它，并像在任何聊天应用程序中一样对其进行动画处理，但作为聊天的父路线会产生动画效果。

就像当路线从"/chat/:chatID" 更改为"/chat/:chatID/image" 时，它会发出动画我看到了很多解决方案，但没有一个对我有用，我真的很沮丧和愤怒，我不明白为什么要做出反应路由器的创建者没有给我们一个选项，让我们可以在需要时为组件制作动画。

聊天组件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>

这是聊天组件内部的图片预览路由的代码：

        <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 时不设置动画，并且图像会以动画形式呈现。

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

【问题讨论】：

标签： javascript reactjs react-router react-transition-group

【解决方案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 转到 @987654323 @ 它将动画出聊天组件然后动画，因为键发生了变化，所以解决方案是检查路径是否有 /image 以及它是否像我一样删除它location.pathname.replace("/image","") 因此，如果您想为嵌套路由设置动画，您应该在父路由中删除这些路由的路径，这样它就不会检测到路径更改，如果您有很多子路由，请创建一个从完整路径中删除所有嵌套路径的函数. 我希望我能帮助别人告诉我你的想法，以及它在 cmets 中是否适合你:))

【讨论】：