Fix pathless route's match when parent is null

packages/react-router/docs/api/match.md

@@ -17,3 +17,28 @@ You'll have access `match` objects in various places:
 
 If a Route does not have a `path`, and therefore always matches, you'll get the closest parent match. Same goes for `withRouter`.
 
+## null matches
+
+A `<Route>` that uses the `children` prop will call its `children` function even when the route's `path` does not match the current location. When this is the case, the `match` will be `null`. Being able to render a `<Route>`'s contents when it does match can be useful, but certain challenges arise from this situation.
+
+The default way to "resolve" URLs is to join the `match.url` string to the "relative" path.
+
+```js
+`${match.url}/relative-path`
+```
+
+If you attempt to do this when the match is `null`, you will end up with a `TypeError`. This means that it is considered unsafe to attempt to join "relative" paths inside of a `<Route>` when using the `children` prop.
+
+A similar, but more subtle situation occurs when you use a pathless `<Route>` inside of a `<Route>` that generates a `null` match object.
+
+```js
+// location.pathname = '/matches'
+<Route path='/does-not-match' children={({ match }) => (
+  // match === null
+  <Route render={({ match:pathlessMatch }) => (
+    // pathlessMatch === ???
+  )}/>
+)}/>
+```
+
+Pathless `<Route>`s inherit their `match` object from their parent. If their parent `match` is `null`, then their match will also be `null`. This means that a) any child routes/links will have to be absolute because there is no parent to resolve with and b) a pathless route whose parent `match` can be `null` will need to use the `children` prop to render.

packages/react-router/modules/Route.js

@@ -66,7 +66,7 @@ class Route extends React.Component {
     const { route } = router
     const pathname = (location || route.location).pathname
 
-    return path ? matchPath(pathname, { path, strict, exact, sensitive }) : route.match
+    return matchPath(pathname, { path, strict, exact, sensitive }, route.match)
   }
 
   componentWillMount() {

packages/react-router/modules/Switch.js

@@ -52,7 +52,7 @@ class Switch extends React.Component {
 
       if (match == null) {
         child = element
-        match = path ? matchPath(location.pathname, { path, exact, strict, sensitive }) : route.match
+        match = matchPath(location.pathname, { path, exact, strict, sensitive }, route.match)
       }
     })
 

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

@@ -378,3 +378,46 @@ describe('A <Route location>', () => {
     })
   })
 })
+
+describe('A pathless <Route>', () => {
+  let rootContext
+  const ContextChecker = (props, context) => {
+    rootContext = context
+    return null
+  }
+
+  ContextChecker.contextTypes = {
+    router: React.PropTypes.object
+  }
+
+  afterEach(() => {
+    rootContext = undefined
+  })
+
+  it('inherits its parent match', () => {
+    const node = document.createElement('div')
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/somepath' ]}>
+        <Route component={ContextChecker} />
+      </MemoryRouter>
+    ), node)
+
+    const { match } = rootContext.router.route
+    expect(match.path).toBe('/')
+    expect(match.url).toBe('/')
+    expect(match.isExact).toBe(false)
+    expect(match.params).toEqual({})
+  })
+
+  it('does not render when parent match is null', () => {
+    const node = document.createElement('div')
+    ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/somepath' ]}>
+        <Route path='/no-match' children={({ match }) => (
+          <Route component={ContextChecker} />
+        )}/>
+      </MemoryRouter>
+    ), node)
+    expect(rootContext).toBe(undefined)
+  })
+})

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

@@ -55,14 +55,21 @@ describe('matchPath', () => {
   })
 
   describe('with no path', () => {
-    it('matches the root URL', () => {
-      const match = matchPath('/test-location/7', {})
-      expect(match).toMatchObject({
-        url: '/',
-        path: '/',
-        params: {},
-        isExact: false
-      })
+    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 null when parent match is null', () => {
+      const pathname = '/some/path'
+      const match = matchPath(pathname, {}, null)
+      expect(match).toBe(null)
     })
   })
 

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

@@ -46,6 +46,31 @@ describe('withRouter', () => {
     ), node)
   })
 
+  it('works when parent match is null', () => {
+    let injectedProps
+    let parentMatch
+
+    const PropChecker = (props) => {
+      injectedProps = props
+      return null
+    }
+
+    const WrappedPropChecker = withRouter(PropChecker)
+
+    const node = document.createElement('div')
+        ReactDOM.render((
+      <MemoryRouter initialEntries={[ '/somepath' ]}>
+        <Route path='/no-match' children={({ match }) => {
+          parentMatch = match
+          return <WrappedPropChecker />
+        }}/>
+      </MemoryRouter>
+    ), node)
+
+    expect(parentMatch).toBe(null)
+    expect(injectedProps.match).toBe(null)
+  })
+
   describe('inside a <StaticRouter>', () => {
     it('provides the staticContext prop', () => {
       const PropsChecker = withRouter(props => {

packages/react-router/modules/matchPath.js

@@ -26,11 +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 { path = '/', exact = false, strict = false, sensitive = false } = options
+  const { path, exact = false, strict = false, sensitive = false } = options
+
+  if (path == null)
+    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}/>
       )}/>
     )