Pathless <Route> inherits parent match (#4643)

When the parent match is null, a new match object is created where the url is the full pathname and isExact is true

Author: pshrmn

packages/react-router/modules/Route.js

@@ -48,7 +48,7 @@ class Route extends React.Component {
 
     const pathname = (location || route.location).pathname
 
-    return matchPath(pathname, { path, strict, exact })
+    return matchPath(pathname, { path, strict, exact }, route.match)
   }
 
   componentWillReceiveProps(nextProps, nextContext) {

packages/react-router/modules/Switch.js

@@ -30,12 +30,12 @@ class Switch extends React.Component {
   render() {
     const { children } = this.props
     const location = this.props.location || this.context.route.location
-
+    const parent = this.context.route.match
     let match, child
     React.Children.forEach(children, element => {
       if (match == null) {
         child = element
-        match = matchPath(location.pathname, element.props)
+        match = matchPath(location.pathname, element.props, parent)
       }
     })
 

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

@@ -34,6 +34,28 @@ describe('matchPath', () => {
     })
   })
 
+  describe("with no path", () => {
+    it("returns parent match", () => {
+      const parentMatch = {
+        url: '/test-location/7',
+        path: '/test-location/:number',
+        params: { number: 7 },
+        isExact: true
+      }
+      const match = matchPath('/test-location/7', {}, parentMatch)
+      expect(match).toBe(parentMatch)
+    })
+
+    it('returns match with default values when parent match is null', () => {
+      const pathname = '/some/path'
+      const match = matchPath(pathname, {}, null)
+      expect(match.url).toBe(pathname)
+      expect(match.path).toBe(undefined)
+      expect(match.params).toEqual({})
+      expect(match.isExact).toBe(true)
+    })
+  })
+
   describe('cache', () => {
     it('creates a cache entry for each exact/strict pair', () => {
       // true/false and false/true will collide when adding booleans

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

@@ -28,4 +28,21 @@ describe('withRouter', () => {
       </MemoryRouter>
     ), node)
   })
+
+  it('passes parent match to wrapped component', () => {
+    let parentMatch
+    const ContextChecker = withRouter(props => {
+      expect(props.match).toEqual(parentMatch)
+      return null
+    })
+
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/bubblegum' ]}>
+        <Route path="/:flavor" render={({ match }) => {
+          parentMatch = match
+          return <ContextChecker/>
+        }}/>
+      </MemoryRouter>
+    ), node)
+  })
 })

packages/react-router/modules/matchPath.js

@@ -26,15 +26,15 @@ const compilePath = (pattern, options) => {
 /**
  * Public API for matching a URL pathname to a path pattern.
  */
-const matchPath = (pathname, options = {}) => {
+const matchPath = (pathname, options = {}, parent) => {
   if (typeof options === 'string')
     options = { path: options }
 
   const { exact = false, strict = false } = options
   const path = options.path || options.from
 
   if (!path)
-    return { url: pathname, isExact: true, params: {} }
+    return parent != null ? parent : { url: pathname, isExact: true, params: {} }
 
   const { re, keys } = compilePath(path, { end: exact, strict })
   const match = re.exec(pathname)