Create pages in gastby dynamically when you dont know the path

Question

I want to create dynamic pages in gatsby but I don't know what the full url name would be.

  createPage({
    path: '/account/orders/:id',
    matchPath: '/account/orders/:id',
    component: path.resolve('./src/templates/order.tsx'),
  });

I thought the code written would be okay to visit page with any value of 'id' but while building the development bundle it gives an error account\orders\:id contains invalid WIN32 path characters

The ':id' value can be anything so I dont want to use looping method to create the page. What could be done?

Does this answer your question? [How to create dynamic route in gatsby](https://stackoverflow.com/questions/55756994/how-to-create-dynamic-route-in-gatsby) — Fiodorov Andrei, Sep 06 '21 at 10:26

score 0 · Answer 1 · answered Sep 06 '21 at 12:27

Taking into account that:

You don't want to loop through pages
You will never know the value of the id

Your only chance is to use client-only routes through the file system route API.

In your case, assuming that your "unknown" page will be under /account/orders you should create a folder structure such: src/pages/account/orders/[...].js. The [...].js notation stands for the file system route for an undefined value.

In the [...].js file you can just create something like:

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Profile from "../components/Profile"
import Default from "../components/Default"
import CustomOrderComponent from "../components/CustomOrderComponent"

const Orders = () => {
  return (
    <Layout>
      <Router basepath="/account/orders">
        <Profile path="/profile" />
        <CustomOrderComponent path='/:id' />
        <Default path="/" />
      </Router>
    </Layout>
  )
}

export default Orders

From the docs:

Briefly, when a page loads, Reach Router looks at the path prop of each component nested under <Router />, and chooses one to render that best matches window.location (you can learn more about how routing works from the @reach/router documentation). In the case of the /orders/profile path, the Profile component will be rendered, as its prefix matches the base path of /orders, and the remaining part is identical to the child’s path.

In the above scenario, CustomOrderComponent will render your variable id (:id).

Thank you. Is there a way to do this without creating new page? — Simran Birla, Sep 07 '21 at 03:51
You need a page to show something to the users that go to `:id`. Can you describe better your scenario? — Ferran Buireu, Sep 07 '21 at 04:55
The error that page was not opening was only with the windows machine, it worked properly when opened with ubuntu, Thank you for the help. — Simran Birla, Dec 17 '21 at 08:11

Create pages in gastby dynamically when you dont know the path

1 Answers1