嗨,我尝试在退出时对 2 条路线进行动画处理,从不透明度 1 到 0。但是由于某种原因,<Link>
点击路线会改变(例如'/' => '/chat?name=bob&room=here'),但页面内容保持不变,并且不会呈现该特定路线的组件。一旦我使用浏览器中的“返回按钮”,动画效果也很好。
任何人都知道为什么不点击按钮?
应用程序.js
return (
<div>
<Router>
<AnimatePresence exitBeforeEnter>
<Switch location={location} key={location.key}>
<Route path="/" exact component={Login}></Route>
<Route path="/chat" component={ChatRoom}></Route>
</Switch>
</AnimatePresence>
</Router>
</div>
);
登录.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="Login-Container"
>
//same code
<Link
onClick={(event) => (!name || !room ? event.preventDefault() : null)}
to={`/chat?name=${name}&room=${room}`}
>
<button
type="submit"
className="Login-Button"
>
Sign In
</button>
</Link>
</motion.div>
);
聊天室.js
return (
<motion.div
initial="out"
animate="in"
exit="out"
variants={pageTransition}
className="ChatRoom-Container"
>
<div className="ChatRoom-NavBar">
<NavLink to="/">
<div
className="ChatRoom-BackButton"
style={{ backgroundImage: `url(${arrow})` }}
></div>
</NavLink>
</div>
</motion.div>
);
};