From 5188f8a60290919de51a45fc7759ce764da315ed Mon Sep 17 00:00:00 2001
From: Supasate Choochaisri <supasate.c@gmail.com>
Date: Thu, 1 Dec 2016 11:27:38 +0700
Subject: [PATCH 1/3] Rebase Miss component to get matchCount from router state

---
 modules/Miss.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/modules/Miss.js b/modules/Miss.js
index 25b7f002ec..04dfdf3a26 100644
--- a/modules/Miss.js
+++ b/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
   }

From c9be99895c3fa3b64af5a85b809479eb7fb1e46d Mon Sep 17 00:00:00 2001
From: Supasate Choochaisri <supasate.c@gmail.com>
Date: Fri, 4 Nov 2016 12:23:51 +0700
Subject: [PATCH 2/3] Add test to check that a children component of Miss is
 always rendered

---
 modules/__tests__/Miss-test.js | 42 ++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/modules/__tests__/Miss-test.js b/modules/__tests__/Miss-test.js
index 553c0b0a94..5fc428ee90 100644
--- a/modules/__tests__/Miss-test.js
+++ b/modules/__tests__/Miss-test.js
@@ -76,4 +76,46 @@ 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()
+      })
+    })
+  })
 })

From 072e8b89b5cd0c5ffe50f485b93fb3673622b652 Mon Sep 17 00:00:00 2001
From: Supasate Choochaisri <supasate.c@gmail.com>
Date: Fri, 4 Nov 2016 12:26:32 +0700
Subject: [PATCH 3/3] Add test to check that a children component of Miss can
 get correct location and matched props

---
 modules/__tests__/Miss-test.js | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/modules/__tests__/Miss-test.js b/modules/__tests__/Miss-test.js
index 5fc428ee90..4b07a44258 100644
--- a/modules/__tests__/Miss-test.js
+++ b/modules/__tests__/Miss-test.js
@@ -117,5 +117,55 @@ describe('Miss', () => {
         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()
+      })
+    })
   })
 })