28

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?

Profer
  • 553
  • 8
  • 40
  • 81

4 Answers4

43

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

Kamil
  • 3
  • 1
wiesson
  • 6,544
  • 5
  • 40
  • 68
  • Thank you very much. Can I remove `/app` from my route? – Profer Apr 19 '19 at 07:33
  • Yes, sure! Adjust the config in `gatsby-node.js` (page.path.match(...)) – wiesson Apr 19 '19 at 07:35
  • I tried that. But not sure how do I remove the `/app` and only put only `/`. Can you please guide me – Profer Apr 19 '19 at 08:11
  • In my humble opinion that is not how gatsby is supposed to work. If you want a fully dynamic page, have a look create-react-app. Gatsby is a static site generator that generates pages from static content. It can handle dynamic content, but if you asked me that's not the main purpose. – wiesson Apr 19 '19 at 08:13
  • 6
    Gatsby is more than a static site generator, you can build apps with it just like you used to do with CRA – Smakosh Oct 01 '19 at 11:30
  • Hey, do you have any GitHub repo for just to know about how to add external CSS and js files in the gatsby project? – sushildlh Mar 21 '20 at 13:35
  • can I use parameters in `createPage`? like: createPage({ path: "/blog/:blogId/:slug", matchPath: "/blog/:blogId/:slug", component: path.resolve("src/components/layouts/BlogLayout.jsx"), }) – Md Abdul Halim Rafi May 23 '20 at 04:10
  • Don't have to touch `gatsby-node.js` at all. Just need to add a file with square brackets in the pages folder. For example users/[id].js. – Operator Nov 07 '21 at 14:19
6

You can use square brackets ([ ]) in the file path to mark any dynamic segments of the URL. For example, in order to edit a user, you might want a route like /user/:id to fetch the data for whatever id is passed into the URL.

src/pages/users/[id].js will generate a route like /users/:id src/pages/users/[id]/group/[groupId].js will generate a route like /users/:id/group/:groupId

Reference: https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api#creating-client-only-routes

Adeyemi Simeon
  • 140
  • 2
  • 6
4

You can use gatsby-plugin-create-client-paths. It uses matchPath. For more info check

  1. https://www.gatsbyjs.org/docs/gatsby-internals-terminology/#matchpath
  2. https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/
Ankit Sinha
  • 1,630
  • 1
  • 20
  • 19
  • not really, I don't think this gives the flexibility of dynamic paths, just making easier to add new ones. See: "Use this plugin to simplify creating a “hybrid” Gatsby app with both statically rendered pages as well as “client-paths”." – Alejandro Moreno Jan 06 '20 at 17:28
1

This answer is Super late, but for anyone in the future who is faced with this problem, I have a simpler solution.

In Gatsby terms it's called a Splat Route.

For examples, If you want some page "domain.com/profile/[id]", where id can be any number, which will be used to display different data inside the website, you should name your page as [...id].

Now inside the page you can access this id as

const ProfilePage = (props) => <div>This page is for id number {props.params.id}</div>

Note: Don't miss the 3 dots, that is what signifies a splat route in gatsby.

Ashish Yadav
  • 101
  • 3