Gatsby: Multiple routes using dynamic path param (e.g. /books/:id) returns 404 when upgrading to gatsby 2.9.0 or greater

[eladams]

Description

I'm using version 2.8.2 of gatsby and when creating the page I've configured the page with (example):

{
    path: '/books/:id'
    ...
}

from some reason this great feature stopped functioning in versions 2.9.0 - 2.13.12

EDIT: checked version 2.8.8 and this is working as well. So the regression happened somewhere between 2.8.8 - 2.9.0

Steps to reproduce

1. in gatsby-node.js:

createPage({
        path: '/deals/:id',
        component: path.resolve('./src/templates/deals.js'),
    },
});

1. Run npm run develop
2. Try opening http://localhost:8000/deals/2345678

Expected result

The page is loaded with { id: "2345678" } in context.

Actual result

404 💩

Environment

System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
npm: 6.10.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Languages:
Python: 2.7.15 - /usr/local/bin/python
Browsers:
Chrome: 75.0.3770.100
Firefox: 64.0.2
Safari: 12.1
npmPackages:
gatsby: 2.13.12

[wardpeet]

Thanks for creating this issue.

This is indeed a regression. I was wondering if the following snippet fixes your bug.

createPage({
  matchPath: '/deals/:id',
  path: '/deals',
  component: path.resolve('./src/templates/deals.js'),
})

if so I can put up a PR to fix this behaviour

[eladams]

Thanks @wardpeet using the matchPath option does the trick! (tested on gatsby 2.13.12)
🥳
BTW, why do we need both options? :)

[wardpeet]

Sweet!

MatchPath is used inside Gatsby to create dynamic routes. More info on our Terminology page. We never intended to create dynamic routes with the path property. The above code snippet with matchPath is the way to go forward. We have a great tutorial explaining how to do this.