/**
 * RouterHistoryContainer is already connected to the router state, so you only
 * have to pass in `routes`. It also responds to history/click events and
 * dispatches routeTo actions appropriately.
 */

import React from 'react';
import createReactClass from 'create-react-class';
import PropTypes from 'prop-types';

import Router from './Router';
import connectRouter from './connectRouter';
import History from './History';

const RouterHistoryContainer = createReactClass({

  propTypes: {
    routes: PropTypes.object.isRequired
  },

  onChangeAddress(url, state) {
    this.props.routeTo(url, {
      state,
      isHistoryChange: true
    });
  },

  render() {
    const { router } = this.props;

    const url = router.current ? router.current.url : null;
    const state = router.current ? router.current.state : undefined;
    const replace = router.current ? router.current.replace : undefined;

    return (
      <div>
        <Router {...this.props} router={router}/>
        <History
          history={this.props.history}
          url={url} state={state} replace={replace}
          isWaiting={!!router.next}
          onChange={this.onChangeAddress}
        />
      </div>
    );
  }
});

export default connectRouter(RouterHistoryContainer);

@@ -476,17 +476,16 @@
 Class(%7B%0A
-%0A
   propTy
@@ -530,16 +530,17 @@
 Required
+,
 %0A  %7D,%0A%0A 
@@ -640,16 +640,17 @@
 ge: true
+,
 %0A    %7D);
@@ -923,17 +923,17 @@
 urn 
-(
+%5B
 %0A      %3C
 div%3E
@@ -932,28 +932,27 @@
    %3C
-div%3E%0A        %3CR
+Router key=%22r
 outer
+%22
  %7B..
@@ -979,21 +979,21 @@
 %7Brouter%7D
+ 
 /%3E
+,
 %0A
-  
       %3CH
@@ -1001,16 +1001,36 @@
 story%0A  
+      key=%22history%22%0A
         
@@ -1066,18 +1066,16 @@
         
-  
 url=%7Burl
@@ -1075,16 +1075,24 @@
 rl=%7Burl%7D
+%0A       
  state=%7B
@@ -1097,16 +1097,24 @@
 =%7Bstate%7D
+%0A       
  replace
@@ -1132,18 +1132,16 @@
         
-  
 isWaitin
@@ -1158,18 +1158,16 @@
 r.next%7D%0A
-  
         
@@ -1208,36 +1208,23 @@
     
-  /%3E%0A      %3C/div%3E%0A    )
+/%3E,%0A    %5D
 ;%0A  %7D
+,
 %0A%7D);

Send the minimal amount of DOM to the client