diff --git a/src/Page.js b/src/Page.js index ccb0453..8c1c5a8 100644 --- a/src/Page.js +++ b/src/Page.js @@ -1,12 +1,12 @@ import React, { Component } from 'react'; class Page extends Component { - render() { - const props = this.props - return ( -
{ props.name }
- ); - } + render() { + const props = this.props + return ( +
{props.name}
+ ); + } } export default Page; diff --git a/src/Pages.js b/src/Pages.js index 3baef77..147dfd7 100644 --- a/src/Pages.js +++ b/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 ( -
{ - React.Children.map(children, (child, i) => { - console.log(child.props.exact, child.props.path) - return ( - child } /> - ) - }) - }
- ); - } +class Pages extends Component { + render() { + const { children } = this.props + return ( +
{ + React.Children.map(children, (child, i) => { + console.log(child.props.exact, child.props.path) + return ( + ( + + {match && React.cloneElement(child, { ...rest })} + + ) + } /> + ) + }) + }
+ ); + } } -export default App; +export default Pages;