Reactjs 反应CST转换而非转换

我正在使用react transition group，代码正在渲染，但是页面没有使用动画进行转换。我使用的是react路由器dom中的Link和NavLink，如果这很重要的话

我试图延长超时时间以查看DOM的更改，但没有效果。我已经多次重构代码，假设我的代码一定是错误的，但毫无用处。我试过react-transition-group-v2，但发现大多数在线资源仍在使用v1，试着按照他们的方向去做，但没有效果。仍然迷路

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ParallaxProvider } from 'react-scroll-parallax';
import { request_page } from "./data/fetch_data.js";
import { TransitionGroup, CSSTransition } from "react-transition-group";

// global components
import Navigation from "./components/Header/Navigation.js";
import Work_With_Us from "./components/Global/Work_With_Us_Button.js";

// routes
import Home from './pages/Home';
import Work from './pages/Work';
import Case_Study from './pages/Case_Study';
import About from './pages/About';


class App extends Component {
    render() {
        return (
            <Router>
                <div className="site-contain">
                    <Navigation />
                    <Work_With_Us />
                    <TransitionGroup>
                        <CSSTransition key={location.key} classNames="page" timeout={30000}>
                            <Switch location={location}>
                                <ParallaxProvider>
                                    <Route exact path='/' component={Home}/>
                                    <Route path='/work/:case_study' component={Case_Study} />
                                    <Route path='/work' component={Work}/>
                                    <Route path='/about' component={About}/>
                                </ParallaxProvider>
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                </div>
            </Router>
        );
    }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“react scroll parallax”导入{ParallaxProvider}；
从“/data/fetch_data.js”导入{request_page}；
从“反应转换组”导入{TransitionGroup，cstranslation}；
//全局组件
从“/components/Header/Navigation.js”导入导航；
从“/components/Global/Work_With_-Us_-Button.js”导入带有_-Us的工作；
//路线
从“./pages/Home”导入主页；
从“./pages/Work”导入工作；
从“./pages/Case_Study”导入案例研究；
从“./pages/About”导入关于；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这是因为location.key在每次路由更新时都会不断更改

因此，要解决此问题，可以尝试使用this.props.location.pathname而不是this.props.location.key。类似于

const currentKey=location.pathname.split（'/'）[1]| |'/'

工作示例：

GitHub上还有一个问题，有更多示例和方法，请检查：

干杯