我正在迁移到 React 并且需要使用 React Pose。
Javascript代码:
import React from 'react';
import '../assets/style.css';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import posed, { PoseGroup } from 'react-pose';
import Home from "./Home";
import About from "./About";
const RouteContainer = posed.div({
enter: { opacity: 1, delay: 300, beforeChildren: false },
exit: { opacity: 0 }
});
function App() {
return (
<Router>
<div>
<Route render={({ location }) => (
<PoseGroup>
<RouteContainer key={location.key}>
<Switch>
<Route exact path="/" component={Home} key="" />
<Route path="/home" component={Home} key="home" />
<Route path="/about" component={About} key="about" />
</Switch>
</RouteContainer>
</PoseGroup>
)}/>
<div className="link" id="route">
<Link to="/home" className="route">Home</Link> • <Link to="/about" className="route">About</Link>
</div>
</div>
</Router>
);
}
export default App;
当我单击链接时,组件首先显示单击的内容,然后退出并进入。
click link, change component, exit, enter
应该是什么
click link, exit, change component, enter