fix trailing slash handling (#3923)

- Add tests for matching pattern with trailing slash.
- Fix non-exact match of pattern with trailing slash.
- Fix incorrect match of pattern with trailing slash.
- Simplify matchPattern with pathToRegexp 'end' option.

modules/__tests__/Match-test.js

@@ -283,6 +283,85 @@ describe('Match', () => {
     })
   })
 
+  describe('with a trailing slash', () => {
+    const TEXT = 'TEXT'
+    const run = (location, cb) => (
+      cb(renderToString(
+        <Match
+          pattern="/foo/"
+          location={location}
+          render={() => (
+            <div>{TEXT}</div>
+          )}
+        />
+      ))
+    )
+
+    describe('when matched exactly', () => {
+      it('renders', () => {
+        run({ pathname: '/foo/' }, (html) => {
+          expect(html).toContain(TEXT)
+        })
+      })
+    })
+
+    describe('when matched partially', () => {
+      it('renders', () => {
+        run({ pathname: '/foo/bar/' }, (html) => {
+          expect(html).toContain(TEXT)
+        })
+      })
+    })
+
+    describe('when the trailing slash is missing', () => {
+      it('does not renders', () => {
+        run({ pathname: '/foo' }, (html) => {
+          expect(html).toNotContain(TEXT)
+        })
+      })
+    })
+  })
+
+  describe('`exactly` prop with a trailing slash', () => {
+    const TEXT = 'TEXT'
+    const run = (location, cb) => (
+      cb(renderToString(
+        <Match
+          exactly
+          pattern="/foo/"
+          location={location}
+          render={() => (
+            <div>{TEXT}</div>
+          )}
+        />
+      ))
+    )
+
+    describe('when matched exactly', () => {
+      it('renders', () => {
+        run({ pathname: '/foo/' }, (html) => {
+          expect(html).toContain(TEXT)
+        })
+      })
+    })
+
+    describe('when matched partially', () => {
+      it('does not render', () => {
+        run({ pathname: '/foo/bar/' }, (html) => {
+          expect(html).toNotContain(TEXT)
+        })
+      })
+    })
+
+    describe('when the trailing slash is missing', () => {
+      it('does not renders', () => {
+        run({ pathname: '/foo' }, (html) => {
+          expect(html).toNotContain(TEXT)
+        })
+      })
+    })
+  })
+
   describe('when rendered in context of a location', () => {
     it('matches the location from context', () => {
       const TEXT = 'TEXT'

modules/matchPattern.js

@@ -1,22 +1,21 @@
 import pathToRegexp from 'path-to-regexp'
 
-const cache = {}
+// cache[exactly][pattern] contains getMatcher(pattern, exactly)
+const cache = {true: {}, false: {}}
 
-const getMatcher = (pattern) => {
-  let matcher = cache[pattern]
+const getMatcher = (pattern, exactly) => {
+  const exactlyStr = exactly ? 'true' : 'false'
+  let matcher = cache[exactlyStr][pattern]
 
   if (!matcher) {
     const keys = []
-    const regex = pathToRegexp(pattern, keys)
-    matcher = cache[pattern] = { keys, regex }
+    const regex = pathToRegexp(pattern, keys, { end: exactly, strict: true })
+    matcher = cache[exactlyStr][pattern] = { keys, regex }
   }
 
   return matcher
 }
 
-const truncatePathnameToPattern = (pathname, pattern) =>
-  pathname.split('/').slice(0, pattern.split('/').length).join('/')
-
 const parseParams = (pattern, match, keys) =>
   match.slice(1).reduce((params, value, index) => {
     params[keys[index].name] = decodeURIComponent(value)
@@ -39,16 +38,14 @@ const matchPattern = (pattern, location, matchExactly, parent) => {
         pattern
     }
 
-    const matcher = getMatcher(pattern)
-    const pathname = matchExactly ?
-      location.pathname : truncatePathnameToPattern(location.pathname, pattern)
-    const match = matcher.regex.exec(pathname)
+    const matcher = getMatcher(pattern, matchExactly)
+    const match = matcher.regex.exec(location.pathname)
 
     if (match) {
       const params = parseParams(pattern, match, matcher.keys)
-      const locationLength = location.pathname.split('/').length
-      const patternLength = pattern.split('/').length
-      const isExact = locationLength === patternLength
+      const pathname = match[0]
+      const isExact = pathname === location.pathname
+
       return { params, isExact, pathname }
     } else {
       return null