createPage route params not getting passed to component

[rgdelato]

Hello there!

When I pass a route param to a page created with the createPage action creator in gatsby-node.js (such as /user/:id), the param (in this case, id) isn't included in the props of the component that gets rendered.

To double-check, I made a fresh gatsby new project using [email protected].

Here's the contents of gatsby-node.js:

const path = require(`path`);

exports.createPages = ({ boundActionCreators }) => {
  const { createPage } = boundActionCreators;

  return new Promise((resolve, reject) => {
    createPage({
      path: "/user/:id",
      component: path.resolve(`./src/test.js`)
    });
    resolve();
  });
};

With that, when I navigate to something like /user/22972379663372344, my test.js component is rendered and receives the following props (note that props.match.params should have an id, but it doesn't):

{
  "page":true,
  "match":{
    "path":"/",
    "url":"/",
    "params":{},
    "isExact":false
  },
  "location":{
    "pathname":"/user/22972379663372344",
    "search":"",
    "hash":""
  },
  "history":{
    "length":4,
    "action":"POP",
    "location":{
      "pathname":"/user/22972379663372344",
      "search":"",
      "hash":""
    }
  },
  "pageResources":{
    "json":{
      "pathContext":{}
    },
    "page":{
      "componentChunkName":"component---src-templates-test-js",
      "layout":"index",
      "layoutComponentChunkName":"component---src-layouts-index-js",
      "jsonName":"user-id.json",
      "path":"/user/:id"
    }
  },
  "pathContext":{}
}

[mpartipilo]

That is because when creating pages all their paths must be hard-coded. In your case, you must create a page for each user id, and pass the user id and any other relevant data as context to the "template" component.

You then retrieve those values from the context with the pathContext property.

There's also this, but I have never used it: https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes

[rgdelato]

Closing this issue since it's been clarified that Gatsby intends for client-only routes to be the solution to this kind of use case.

[alvis]

Alternatively, you can use route-parser to capture the parameters from location.