Add children prop feature in <Miss>

modules/Miss.js

@@ -16,10 +16,18 @@ class Miss extends React.Component {
   }
 
   render() {
-    const { render, component:Component } = this.props
+    const { children, render, component:Component } = this.props
     const { matchCount } = this.context.router.match.getState()
     const { location } = this.context.router.getState()
-    return matchCount === 0 ? (
+
+    // Miss component is matched when there is no other matches
+    const matched = matchCount === 0
+
+    if (children) {
+      return (children({ matched, location }))
+    }
+
+    return matched ? (
       render ? (
         render({ location })
       ) : (
@@ -31,7 +39,7 @@ class Miss extends React.Component {
 
 if (__DEV__) {
   Miss.propTypes = {
-    children: PropTypes.node,
+    children: PropTypes.func,
     render: PropTypes.func,
     component: PropTypes.func
   }

modules/__tests__/Miss-test.js

@@ -76,4 +76,96 @@ describe('Miss', () => {
       })
     })
   })
+
+  describe('with a `children` prop', () => {
+    const MATCH = 'MATCH'
+
+    it('renders when the location matches', (done) => {
+      const div = document.createElement('div')
+      const loc = { pathname: '/' }
+
+      render((
+        <MemoryRouter initialEntries={[ loc ]}>
+          <div>
+            <Match pattern="/" exactly={true} component={() => <div>{MATCH}</div>} />
+            <Miss children={() => <div>{TEXT}</div>}/>
+          </div>
+        </MemoryRouter>
+      ), div, () => {
+        expect(div.innerHTML).toContain(MATCH)
+        expect(div.innerHTML).toContain(TEXT)
+        unmountComponentAtNode(div)
+        done()
+      })
+    })
+
+    it('renders when the location does not match', (done) => {
+      const div = document.createElement('div')
+      const loc = { pathname: '/' }
+
+      render((
+        <MemoryRouter initialEntries={[ loc ]}>
+          <div>
+            <Match pattern="/foo" component={() => <div>{MATCH}</div>} />
+            <Miss children={() => <div>{TEXT}</div>} />
+          </div>
+        </MemoryRouter>
+      ), div, () => {
+        expect(div.innerHTML).toNotContain(MATCH)
+        expect(div.innerHTML).toContain(TEXT)
+        unmountComponentAtNode(div)
+        done()
+      })
+    })
+
+    describe('props passed', () => {
+      const div = document.createElement('div')
+      const run = (location, cb) => {
+        render((
+          <MemoryRouter initialEntries={[ location ]}>
+            <div>
+              <Match pattern="/:foo/:bar" component={() => (<div>{MATCH}</div>)} />
+              <Miss children={(props) => (<div>{(cb(props), null)}</div>)} />
+            </div>
+          </MemoryRouter>
+        ), div)
+      }
+
+      it('passes props when matched', (done) => {
+        run({ pathname: '/one/two' }, (props) => {
+          expect(props).toEqual({
+            matched: false, // indicate Miss component is not matched
+            location: {
+              hash: '',
+              pathname: '/one/two',
+              query: null,
+              search: '',
+              state: null,
+              key: undefined
+            }
+          })
+        })
+        unmountComponentAtNode(div)
+        done()
+      })
+
+      it('passes props when not matched', (done) => {
+        run({ pathname: '/' }, (props) => {
+          expect(props).toEqual({
+            matched: true, // indicate Miss component is matched
+            location: {
+              hash: '',
+              pathname: '/',
+              query: null,
+              search: '',
+              state: null,
+              key: undefined
+            }
+          })
+        })
+        unmountComponentAtNode(div)
+        done()
+      })
+    })
+  })
 })