Pathless child routes inherit parent, even when null

This is only an issue when you use <Route children>. If you render a pathless <Route> inside of a <Route children>, you must also use <Route children> (instead of <Route render> or <Route component>).

This commit also switches withRouter to using <Route children> instead of <Route render> so that it works when the parent match is null.

Author: pshrmn

packages/react-router/modules/__tests__/Route-test.js

@@ -394,7 +394,7 @@ describe('A pathless <Route>', () => {
     rootContext = undefined
   })
 
-  it("inherits its parent match", () => {
+  it('inherits its parent match', () => {
     const node = document.createElement('div')
     ReactDOM.render((
       <MemoryRouter initialEntries={[ '/somepath' ]}>
@@ -409,7 +409,7 @@ describe('A pathless <Route>', () => {
     expect(match.params).toEqual({})
   })
 
-  it('computes match with default values when parent match is null', () => {
+  it('does not render when parent match is null', () => {
     const node = document.createElement('div')
     ReactDOM.render((
       <MemoryRouter initialEntries={[ '/somepath' ]}>
@@ -418,11 +418,6 @@ describe('A pathless <Route>', () => {
         )}/>
       </MemoryRouter>
     ), node)
-    const { match } = rootContext.router.route
-
-    expect(match.path).toBe(undefined)
-    expect(match.url).toBe('/_FAKE_MATCH_DO_NOT_ATTEMPT_TO_RESOLVE_USING_THIS_OR_YOU_WILL_BE_DISAPPOINTED')
-    expect(match.isExact).toBe(true)
-    expect(match.params).toEqual({})
+    expect(rootContext).toBe(undefined)
   })
 })

packages/react-router/modules/__tests__/matchPath-test.js

@@ -66,13 +66,10 @@ describe('matchPath', () => {
       expect(match).toBe(parentMatch)
     })
 
-    it('returns match with default values when parent match is null', () => {
+    it('returns null when parent match is null', () => {
       const pathname = '/some/path'
       const match = matchPath(pathname, {}, null)
-      expect(match.url).toBe('/_FAKE_MATCH_DO_NOT_ATTEMPT_TO_RESOLVE_USING_THIS_OR_YOU_WILL_BE_DISAPPOINTED')
-      expect(match.path).toBe(undefined)
-      expect(match.params).toEqual({})
-      expect(match.isExact).toBe(true)
+      expect(match).toBe(null)
     })
   })
 

packages/react-router/modules/__tests__/withRouter-test.js

@@ -62,14 +62,13 @@ describe('withRouter', () => {
       <MemoryRouter initialEntries={[ '/somepath' ]}>
         <Route path='/no-match' children={({ match }) => {
           parentMatch = match
-          return <Route component={WrappedPropChecker} />
+          return <WrappedPropChecker />
         }}/>
       </MemoryRouter>
     ), node)
 
-    const { match } = injectedProps
     expect(parentMatch).toBe(null)
-    expect(match).not.toBe(null)
+    expect(injectedProps.match).toBe(null)
   })
 
   describe('inside a <StaticRouter>', () => {

packages/react-router/modules/matchPath.js

@@ -33,13 +33,7 @@ const matchPath = (pathname, options = {}, parent) => {
   const { path, exact = false, strict = false, sensitive = false } = options
 
   if (path == null)
-    return parent != null
-      ? parent
-      : {
-          url: '/_FAKE_MATCH_DO_NOT_ATTEMPT_TO_RESOLVE_USING_THIS_OR_YOU_WILL_BE_DISAPPOINTED',
-          isExact: true,
-          params: {}
-        }
+    return parent
 
   const { re, keys } = compilePath(path, { end: exact, strict, sensitive })
   const match = re.exec(pathname)

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}/>
       )}/>
     )