Skip to content

Instantly share code, notes, and snippets.

@ariesshrimp
Last active May 7, 2017 07:35
Show Gist options
  • Save ariesshrimp/00a1bc702ecc60cbf0844db8e670ad6c to your computer and use it in GitHub Desktop.
Save ariesshrimp/00a1bc702ecc60cbf0844db8e670ad6c to your computer and use it in GitHub Desktop.
A working example of React Router 4's <Switch /> API using CSS Transition Group to animate content between routes.
import React from 'react'
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'
const BasicExample = () => (
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
<hr/>
<Route render={({location}) => <ReactCSSTransitionGroup transitionName={{
enter: 'enter',
enterActive: 'enterActive',
leave: 'leave',
leaveActive: 'leaveActive',
}}
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<Switch key={location.key} location={location}>
<Route exact path="/" component={Home}/>
<Route exact path="/about" component={About}/>
</Switch>
</ReactCSSTransitionGroup>
} />
</div>
</Router>
)
const Home = () => (
<div>
<h2>Home</h2>
</div>
)
const About = () => (
<div>
<h2>About</h2>
</div>
)
export default BasicExample
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment