reindent

src/Page.js

@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 
 class Page extends Component {
-  render() {
-    const props = this.props
-    return (
-      <div className="page">{ props.name }</div>
-    );
-  }
+    render() {
+        const props = this.props
+        return (
+            <div className="page">{props.name}</div>
+        );
+    }
 }
 
 export default Page;

src/Pages.js

@@ -2,23 +2,41 @@ import React, { Component } from 'react';
 
 import { BrowserRouter as Router, Route } from 'react-router-dom'
 
+import { TransitionGroup } from 'react-transition-group'
+
 import './App.css';
 
+const transitionStyles = {
+	entering: { opacity: 0 },
+	entered: { opacity: 1 },
+};
+
+const firstChild = props => {
+	const childrenArray = React.Children.toArray(props.children);
+	return childrenArray[0] || null;
+};
 
-class App extends Component {
-  render() {
-    const { children } = this.props
-    return (
-      <Router><div>{
-        React.Children.map(children, (child, i) => {
-          console.log(child.props.exact, child.props.path)
-          return (
-            <Route exact={ child.props.exact } path={ child.props.path } render={ () => child } />
-          )
-        })
-      }</div></Router>
-    );
-  }
+class Pages extends Component {
+	render() {
+		const { children } = this.props
+		return (
+			<Router><div>{
+				React.Children.map(children, (child, i) => {
+					console.log(child.props.exact, child.props.path)
+					return (
+						<Route exact={child.props.exact} path={child.props.path} children={({ match, ...rest }) => (
+							<TransitionGroup
+								component={firstChild}
+							>
+								{match && React.cloneElement(child, { ...rest })}
+							</TransitionGroup>
+						)
+						} />
+					)
+				})
+			}</div></Router>
+		);
+	}
 }
 
-export default App;
+export default Pages;