NavLink should render child components wrapped by withRouter #5141

packages/react-router-dom/modules/__tests__/NavLink-test.js

@@ -3,6 +3,7 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import MemoryRouter from 'react-router/MemoryRouter'
 import NavLink from '../NavLink'
+import withRouter from '../withRouter'
 
 describe('NavLink', () => {
   const node = document.createElement('div')
@@ -22,6 +23,24 @@ describe('NavLink', () => {
       expect(a.className).toEqual('active')
     })
 
+    it('renders child components that use withRouter', () => {
+      class WrappedComponent extends React.Component {
+        render() {
+          return null
+        }
+      }
+      const Component = withRouter(WrappedComponent)
+
+      let ref
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink to='/pizza'><Component wrappedComponentRef={r => ref = r} /></NavLink>
+        </MemoryRouter>
+      ), node)
+
+      expect(ref).toBeA(WrappedComponent)
+    })
+
     it('applies its passed activeClassName', () => {
       ReactDOM.render((
         <MemoryRouter initialEntries={['/pizza']}>
@@ -63,6 +82,24 @@ describe('NavLink', () => {
       expect(a.className).toNotContain('active')
     })
 
+    it('renders child components that use withRouter', () => {
+      class WrappedComponent extends React.Component {
+        render() {
+          return null
+        }
+      }
+      const Component = withRouter(WrappedComponent)
+
+      let ref
+      ReactDOM.render((
+        <MemoryRouter initialEntries={['/pizza']}>
+          <NavLink exact to="/salad"><Component wrappedComponentRef={r => ref = r} /></NavLink>
+        </MemoryRouter>
+      ), node)
+
+      expect(ref).toBeA(WrappedComponent)
+    })
+
     it('does not apply its passed activeClassName', () => {
       ReactDOM.render((
         <MemoryRouter initialEntries={['/pizza']}>
@@ -272,7 +309,7 @@ describe('NavLink', () => {
       const a = node.getElementsByTagName('a')[0]
       expect(a.className).toNotContain('active').toContain('selected')
     })
-    
+
     it('is not overwritten by the current location', () => {
       ReactDOM.render((
         <MemoryRouter initialEntries={['/pasta']}>

packages/react-router/modules/withRouter.js

@@ -10,7 +10,7 @@ const withRouter = (Component) => {
   const C = (props) => {
     const { wrappedComponentRef, ...remainingProps } = props
     return (
-      <Route render={routeComponentProps => (
+      <Route children={routeComponentProps => (
         <Component {...remainingProps} {...routeComponentProps} ref={wrappedComponentRef}/>
       )}/>
     )