Map custom routes to components?

[jmknoll]

I'm generally a big fan of Gatsby's automagical routing. However, there are situations where I think it would be beneficial to map custom urls to particular components, like how its done by react-router, rather than airing my file structure for the entire internet to see.

Or is this already possible, and I'm just missing it?

[danoc]

@jmknoll – createPage makes it possible to programmatically create pages based on whatever convention you choose.

The blog posts on my website, for example, get their URLs from a path property in the markdown file.

Those files are then looped over and createPage is called:
https://github.com/danoc/danoc.me/blob/5c42c1dce51b0c075d72e1d01a74b1871845c17b/gatsby-node.js#L28-L33

[KyleAMathews]

Yeah, you either create routes manually with createPage or have routes created automatically by filename by adding components to src/pages/*.js.

[jmknoll]

Thanks @danoc, hadn't found that in the docs.

[ElijahLynn]

I came across this issue as a top search result for searching how to create custom routes for components. My use case was to have a custom route for src/pages/tags.js be /blog/tags instead of /tags, like gatsbyjs.org's blog has. I was trying to go the createPage route and then came across an easier way by looking at a 404 debug message from Gatsby, which I think it suggested. I just had to create a /src/pages/blog/ path and put tags.js inside that. Then my path became /blog/tags as I wanted. Hope this helps someone.