File System Route API

Please see the documentation to learn about all options. Below you'll see some example pages created.

Collection routes

List of products (both linked by name & SKU). Those were created via collection routes. When you link to a page that doesn't exist a client-only page acts like a fallback (the [name].js page). This example also shows that you can create multiple pages for the same view, in this case display product information both for the name and SKU.

In order to link to create the correct links in this overview gatsbyPath was used.

Accessing parent data

The example below is a list of blog posts that were written in markdown and named in the format YYYY-MM-DD-title.md. Markdown nodes automatically add the File node as a parent thus you can access things like the name, e.g. to construct a route at /blog/YYYY-MM-DD-title.

Nested collections

The example below does a group query on all parks and links to them. The paths are created as nested collections, e.g. to construct a route at /parks/theme-park/park-one/.

Client-Only routes

As shortly mentioned for the "Collection routes" the [name].js file inside src/pages/products is already a client-only page. But you can do even more with those! See the example below: