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