React CSSTransition not transitioning

Question

I'm working with react-transition-group and the code is rendering, but the pages aren't transitioning with animation. I'm using Link and NavLink from react-router-dom if that matters.

I've tried to lengthen the timeOut to see the DOM change to no avail. I've refactored the code several times assuming that my code must be wrong somehow to no avail. I've tried react-transition-group-v2 but figured out most online sources are still using v1, tried to follow their direction to no avail. Latest example. Still at a lost.

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;

score 1 · Accepted Answer · answered Apr 07 '19 at 17:42

That's because location.key keeps changing every time the route gets an update.

So, to solve this problem you can try using this.props.location.pathname instead of this.props.location.key. Something like const currentKey = location.pathname.split('/')[1] || '/'

Working example: https://codesandbox.io/s/4RAqrkRkn?view=preview

Also there is an issue on GitHub with more examples and ways to do it, check it: https://github.com/ReactTraining/react-router/issues/5279

Cheers!

React CSSTransition not transitioning

1 Answers1