Javascript 在过渡之前对姿势组件更改作出反应

我正在移动以做出反应，需要使用反应姿势

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;

从“React”导入React；
导入“../assets/style.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从'react pose'导入posed，{PoseGroup}；
从“/Home”导入主页；
从“/About”导入关于；
常量RouteContainer=posed.div({
输入：{opacity:1，delay:300，beforeChildren:false}，
退出：{不透明度：0}
});
函数App（）{
返回(
(
)}/>
家•关于
);
}
导出默认应用程序；

当我单击链接时，组件首先显示单击的内容，然后执行exit和enter操作

单击链接，更改组件，退出，输入

它应该是什么

单击链接，退出，更改组件，输入