问题描述
我有一个用 react 和 react 路由器制作的聊天应用程序我使用了 react 转换组来在聊天之间设置动画，但问题是我在聊天中有图片，我想在用户点击它们时将它们显示给用户并且还想用一条路线来做这件事，并像在任何聊天应用程序中一样对其进行动画处理，但作为聊天的父路线动画出来。
就像当路线从 html,body {
margin: 0;
padding: 0;
align-items: center;
text-align: center;
}
body {
border: 3px solid green;
max-width: 600px;
margin: 0 auto;
color: #fff;
}
#wrapper {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: darkcyan;
}
#content {
border: 3px solid red;
Box-sizing: border-Box;
position: absolute;
padding: 0;
margin-left: 0;
margin-right: 0;
text-align: center;
overflow: auto;
left: 0;
right: 0;
top: 70px;
width: 100%;
}
#content a {
font-size: 25px;
}
#first-row {
margin-top: 20px;
}
.col {
border-radius: 15px;
-moz-border-radius: 15px;
display: inline-block;
width: 350px;
min-height: 350px;
border: 3px solid green;
background: rgba(150,150,50,0.8);
vertical-align: top;
text-align:center;
margin: 0 40px;
/* margin-right: 100px; */
}
.col a img {
padding:0;
left:0;
right:0;
margin: 0 auto;
}
.technology_images {
text-align: left;
}
div:not(.technology_images,.col) {
min-height: 400px;
Box-sizing: border-Box;
width: 100%;
}
更改为 "/chat/:chatID" 时，它动画显示我看到了很多解决方案，但没有一个对我有用，我真的很沮丧和生气，我不这样做'不明白为什么 React 路由器的创建者没有给我们一个选项来在我们想要的时候为组件制作动画。
下面是聊天组件Route的代码：
"/chat/:chatID/image" <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>
并检查它是否具有图像路由，如果有的话，我会将键设为 null 但组件仍然有动画，我可以看到它，它只动画出来，但没有在我希望组件在转到 /image 时不设置动画，并且图像将使用动画呈现。
此外，当我退出应该向用户显示图像的图像预览组件时，聊天组件仅在没有动画的情况下设置动画。 所以请帮助我我真的厌倦了反应路由器！！！
解决方法
我找到了解决方案！！！：
<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","")
因此，如果您想为嵌套路由设置动画，您应该删除父路由中这些路由的路径，这样它就不会检测到路径更改，并且如果您有很多子路由，则创建一个从完整路径中删除所有嵌套路径的函数.
我希望我能帮助别人告诉我你的想法，以及它是否对你有用 :))