javascript - 转换前 React Pose 组件更改

Question

我正在迁移到 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

标签： javascriptreactjsreact-pose