feat(core): explicitly unmount hot routes

Author: justingreenberg

src/containers/AppContainer.js

@@ -1,22 +1,21 @@
-import React, { PropTypes } from 'react'
+import React, { Component, PropTypes } from 'react'
 import { Router } from 'react-router'
 import { Provider } from 'react-redux'
 
-class AppContainer extends React.Component {
+class AppContainer extends Component {
   static propTypes = {
     history: PropTypes.object.isRequired,
     routes: PropTypes.object.isRequired,
-    routerKey: PropTypes.number,
     store: PropTypes.object.isRequired
   }
 
   render () {
-    const { history, routes, routerKey, store } = this.props
+    const { history, routes, store } = this.props
 
     return (
       <Provider store={store}>
         <div style={{ height: '100%' }}>
-          <Router history={history} children={routes} key={routerKey} />
+          <Router history={history} children={routes} />
         </div>
       </Provider>
     )

src/main.js

@@ -40,37 +40,47 @@ if (__DEBUG__) {
 // ========================================================
 const MOUNT_NODE = document.getElementById('root')
 
-let render = (routerKey = null) => {
+let render = () => {
   const routes = require('./routes/index').default(store)
 
   ReactDOM.render(
     <AppContainer
       store={store}
       history={history}
       routes={routes}
-      routerKey={routerKey}
     />,
     MOUNT_NODE
   )
 }
 
-// Enable HMR and catch runtime errors in RedBox
 // This code is excluded from production bundle
-if (__DEV__ && module.hot) {
-  const renderApp = render
-  const renderError = (error) => {
-    const RedBox = require('redbox-react').default
+if (__DEV__) {
+  if (module.hot) {
+    // Development render functions
+    const renderApp = render
+    const renderError = (error) => {
+      const RedBox = require('redbox-react').default
 
-    ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
-  }
-  render = () => {
-    try {
-      renderApp(Math.random())
-    } catch (error) {
-      renderError(error)
+      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
+    }
+
+    // Wrap render in try/catch
+    render = () => {
+      try {
+        renderApp()
+      } catch (error) {
+        renderError(error)
+      }
     }
+
+    // Setup hot module replacement
+    module.hot.accept('./routes/index', () => {
+      setTimeout(() => {
+        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
+        render()
+      })
+    })
   }
-  module.hot.accept(['./routes/index'], () => render())
 }
 
 // ========================================================