用react-pose进行React路由器页面转换似乎没有任何作用

Question

我有以下应用程序：

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Search from './pages/Search';
import About from './pages/About';
import posed, { PoseGroup } from 'react-pose';

const RoutesContainer = posed.div({
    enter: { opacity: 1, delay: 5000 },
    exit: { opacity: 0 }
});

class App extends Component {
    render() {
        return (
            <div className="page-content-container">
            <Router>
                    <PoseGroup>
                        <RoutesContainer key={window.location.pathname}>
                            <Switch>
                                <Route exact path="/" component={Search} key="search"/>
                                <Route exact path="/about" component={About} key="about"/>
                            </Switch>
                        </RoutesContainer>
                    </PoseGroup>
            </Router>
            </div>
        );
    }
}

export default App;

但是，当我单击“关于”页面或返回时，看不到任何页面转换。有人知道为什么吗？