Prevent remount component on routes with the same component

packages/react-router-config/modules/__tests__/renderRoutes-test.js

@@ -1,7 +1,10 @@
 import React from 'react'
+import ReactDOM from 'react-dom'
 import ReactDOMServer from 'react-dom/server'
 import StaticRouter from 'react-router/StaticRouter'
+import Router from 'react-router/Router'
 import renderRoutes from '../renderRoutes'
+import createHistory from 'history/createMemoryHistory'
 
 describe('renderRoutes', () => {
   let renderedRoutes
@@ -111,6 +114,58 @@ describe('renderRoutes', () => {
       expect(renderedRoutes[0]).toEqual(routeToMatch)
       expect(renderedRoutes[1]).toEqual(childRouteToMatch)
     })
+
+    it('does not remount a <Route>', () => {
+      const node = document.createElement('div')
+
+      let mountCount = 0
+
+      const App = ({ route: { routes } }) => (
+        renderRoutes(routes)
+      )
+
+      class Comp extends React.Component {
+        componentDidMount() {
+          mountCount++
+        }
+
+        render() {
+          return <div />
+        }
+      }
+
+      const routes = [
+        { path: '/',
+          component: App,
+          routes: [
+            { path: '/one',
+              component: Comp
+            },
+            { path: '/two',
+              component: Comp
+            }
+          ]
+        }
+      ]
+
+      const history = createHistory({
+        initialEntries: [ '/one' ]
+      })
+
+      ReactDOM.render((
+        <Router history={history}>
+          {renderRoutes(routes)}
+        </Router>
+      ), node)
+
+      expect(mountCount).toBe(1)
+
+      history.push('/one')
+      expect(mountCount).toBe(1)
+
+      history.push('/two')
+      expect(mountCount).toBe(1)
+    })
   })
 
   describe('routes with exact', () => {

packages/react-router-config/modules/renderRoutes.js

@@ -4,10 +4,16 @@ import Route from 'react-router/Route'
 
 const renderRoutes = (routes, extraProps = {}) => routes ? (
   <Switch>
-    {routes.map((route, i) => (
-      <Route key={i} path={route.path} exact={route.exact} strict={route.strict} render={(props) => (
-        <route.component {...props} {...extraProps} route={route}/>
-      )}/>
+    {routes.map(route => (
+      <Route
+        key='prevent-remount-and-use-static-key'
+        path={route.path}
+        exact={route.exact}
+        strict={route.strict}
+        render={(props) => (
+          <route.component {...props} {...extraProps} route={route}/>
+        )}
+      />
     ))}
   </Switch>
 ) : null

packages/react-router-config/package.json

@@ -41,6 +41,7 @@
     "eslint-plugin-import": "^1.15.0",
     "eslint-plugin-react": "^5.2.2",
     "gzip-size": "^3.0.0",
+    "history": "^4.6.3",
     "jest": "^20.0.4",
     "pretty-bytes": "^3.0.1",
     "react": "^15.4.2",