Attempt to catch all routes with ...slug but returns 404 error

[CallmeHongmaybe]

Bug report

Describe the bug

I put a Link tag to a function component and and if I ever click on this I got a 404 error: Page does not exist

<Link href="/list/[...slug]" as={`/list/${type}/${country}`}>
          <div className="..."> See full list </div>
</Link> 

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. Created a "list" sub-directory in the "pages" directory
   

2. Added [...slug].js to list

3. Added this block of code to [...slug].js

import { useRouter } from 'next/router'; 

   export default function List() {
       const router = useRouter()
       const slug = router.query.slug || []

   return (
       <>
       <div> You're seeing {slug.join('/')} </div>
       <div className="flex flex-col">
           <div>Here are the specs of this page: </div>
           <div>Router.query: {router.query}</div>
           <div>Router.route: {router.route}</div>
       </div>
       </>
   )
}

List.getInitialProps = async ctx => {
   console.log(ctx.query.slug); 
}

4. Run npm run dev
   

5. Open any page on the app ( See the GIF below )

6. Click on "See full list" button

7. Gets 404 error

Expected behavior

I expect to see a page after I click "See full list"

Screenshots

System information

• OS: macOS 10.13.6
• Browser: Chrome
• Version of 9.4.2
• Version of Node.js: 12.6.0

Additional context