Fix dynamic route match and basePath (vercel#14036)

This correctly strips the `basePath` before generating the `route-matcher` for dynamic routes and adds regression tests to ensure these work correctly with the `basePath` feature Closes: vercel#13966
MLH-Fellowship · Jun 12, 2020 · 95915d7 · 95915d7
1 parent 5dc4b29
commit 95915d7
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 1 deletion.
diff --git a/packages/next/next-server/lib/router/router.ts b/packages/next/next-server/lib/router/router.ts
@@ -457,7 +457,9 @@ export default class Router implements BaseRouter {
       if (isDynamicRoute(route)) {
         const { pathname: asPathname } = parse(as)
         const routeRegex = getRouteRegex(route)
-        const routeMatch = getRouteMatcher(routeRegex)(asPathname)
+        const routeMatch = getRouteMatcher(routeRegex)(
+          delBasePath(asPathname || '')
+        )
         if (!routeMatch) {
           const missingParams = Object.keys(routeRegex.groups).filter(
             (param) => !query[param]

diff --git a/test/integration/basepath/pages/[slug].js b/test/integration/basepath/pages/[slug].js
@@ -0,0 +1,3 @@
+import { useRouter } from 'next/router'
+
+export default () => <p>slug: {useRouter().query.slug}</p>
diff --git a/test/integration/basepath/pages/catchall/[...parts].js b/test/integration/basepath/pages/catchall/[...parts].js
@@ -0,0 +1,3 @@
+import { useRouter } from 'next/router'
+
+export default () => <p>parts: {useRouter().query.parts?.join('/')}</p>
diff --git a/test/integration/basepath/pages/hello.js b/test/integration/basepath/pages/hello.js
@@ -20,6 +20,18 @@ export default () => (
         <h1>getServerSideProps</h1>
       </a>
     </Link>
+    <br />
+    <Link href="/[slug]" as="/first">
+      <a id="dynamic-link">
+        <h1>dynamic page</h1>
+      </a>
+    </Link>
+    <br />
+    <Link href="/catchall/[...parts]" as="/catchall/hello/world">
+      <a id="catchall-link">
+        <h1>catchall page</h1>
+      </a>
+    </Link>
     <div id="base-path">{useRouter().basePath}</div>
     <div id="pathname">{useRouter().pathname}</div>
   </>

diff --git a/test/integration/basepath/test/index.test.js b/test/integration/basepath/test/index.test.js
@@ -102,6 +102,24 @@ const runTests = (context, dev = false) => {
     await check(() => browser.elementByCss('p').text(), /hello from another/)
   })
 
+  it('should work with normal dynamic page', async () => {
+    const browser = await webdriver(context.appPort, '/docs/hello')
+    await browser.elementByCss('#dynamic-link').click()
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /slug: first/
+    )
+  })
+
+  it('should work with catch-all page', async () => {
+    const browser = await webdriver(context.appPort, '/docs/hello')
+    await browser.elementByCss('#catchall-link').click()
+    await check(
+      () => browser.eval(() => document.documentElement.innerHTML),
+      /parts: hello\/world/
+    )
+  })
+
   it('should 404 when manually adding basePath with <Link>', async () => {
     const browser = await webdriver(
       context.appPort,