Provider/Router/ReactCSSTransitionGroup

[shoutingwei]

ReactDOM.render(
    (<Provider store={store}>
        <Router history={history}>
            <Route path="/" component={App}>
            <IndexRoute component={Home}/>
            <Route path="list" component={List}/>
            <Route path="detail" component={Detail}/>
        </Router>
    </Provider>),
    document.getElementById("root")
);

class App extends React.Component{
    constructor(props, context){
        super(props, context);
    }
    ...
   render(){
       return (
           <ReactCSSTransitionGroup
               transitionName="transitionWrapper"
               component="div"
               transitionEnterTimeout={300}
               transitionLeaveTimeout={300}>
               <div key={this.props.location.pathname}
                   style={{position:"absolute",width:"100%"}}>
                    {this.props.children}
               </div>
            </ReactCSSTransitionGroup>
       );    
   }    
}

Provider: http://cn.redux.js.org/docs/react-redux/api.html ReactCSSTransitionGroup: https://reactjs.org/docs/animation.html