React Router v4 & CSS Transition Group

Question

I have a simple example of react-router v4 & route transitions. It follows the example shown at https://reacttraining.com/react-router/web/example/animated-transitions. The result, however, is only the last route is shown. The others are just blank. https://codesandbox.io/s/r0PvB30wk.

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import { CSSTransitionGroup } from 'react-transition-group'

import About from './components/About';
import Home from './components/Home';
import Topics from './components/Topics';

import './styles.css'

const BasicExample = () => (
  <Router>
    <Route render={({ location }) => (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/topics">Topics</Link></li>
        </ul>

        <hr />
        <CSSTransitionGroup
          transitionEnterTimeout={300}
          transitionLeaveTimeout={300}
          transitionName="fade"
        >
          <Route exact path="/"       component={Home}   location={location} key={location.key} />
          <Route       path="/about"  component={About}  location={location} key={location.key} />
          <Route       path="/topics" component={Topics} location={location} key={location.key} />
        </CSSTransitionGroup>
      </div>
    )}/>
  </Router>
);

render(<BasicExample />, document.body);

Brad Woods Brad Woods · Accepted Answer · 2017-07-05T08:40:46

For anyone interested, the only way I could get this to work was to use a <switch> from react-router.

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'
import { CSSTransitionGroup } from 'react-transition-group'

import About from './components/About'
import Home from './components/Home'
import Topics from './components/Topics'

import './styles.css'

const BasicExample = () => (
  <Router>
    <Route render={({ location, history, match }) => (
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/topics">Topics</Link></li>
        </ul>

        <hr />
        <CSSTransitionGroup
          transitionEnterTimeout={500}
          transitionLeaveTimeout={500}
          transitionName="fade"
        >
          <Switch key={location.key} location={location}>
            <Route exact path="/"       component={Home}   location={location} key={location.key} />
            <Route       path="/about"  component={About}  location={location} key={location.key} />
            <Route       path="/topics" component={Topics} location={location} key={location.key} />
          </Switch>
        </CSSTransitionGroup>
      </div>
    )}/>
  </Router>
)

render(<BasicExample />, document.body)

React Router v4 & CSS Transition Group

2 Answers