How to create dynamic route in gatsby

I have setup gatsby project using this link. It is working correctly.

Now I know how to create route by defining the component inside the pages folder. But now I have a new challenge I need to create one dynamic route so that I can pass my id in it (Just like reactjs).

<Route path: "/path/:id"/>

How do I do that in gatsby?

Solution

You have to explicitly tell gatsby that a path should be dynamic. From the docs:

// gatsby-node.js
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  // page.matchPath is a special key that's used for matching pages
  // only on the client.
  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    // Update the page.
    createPage(page)
  }
}

and then you can use dynamic routing in src/pages/app.js

import { Router } from "@reach/router"

const SomeSubPage = props => {
  return <div>Hi from SubPage with id: {props.id}</div>
}

const App = () => (
  <Layout>
    <Link to="/app/1">First item</Link>{" "}
    <Link to="/app/2">Second item</Link>{" "}

    <Router>
      // ...dynamic routes here
      <SomeSubPage path="/app/:id" />
    </Router>
  </Layout>
)

export default App

Everything that goes to /app/* will be handled dynamically now. You should find your id as usual in the props.

Have a look at their authentication example https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth