Create pages in gastby dynamically when you dont know the path - reactjs

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?

Answer 1

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).