Как создать динамический маршрут в gatsby

Вы должны явно указать Гэтсби, что путь должен быть динамическим. Из документы:

// 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)
  }
}

а затем вы можете использовать динамическую маршрутизацию в 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

Все, что идет к /app/*, теперь будет обрабатываться динамически. Вы должны найти свой идентификатор, как обычно, в реквизитах.

Взгляните на их пример аутентификации https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth

Вы можете использовать gatsby-plugin-create-client-paths. Он использует matchPath. Для получения дополнительной информации проверьте

1. https://www.gatsbyjs.org/docs/gatsby-internals-terminology/#matchpath
2. https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

Вы можете использовать квадратные скобки ([ ]) в пути к файлу, чтобы отметить любые динамические сегменты URL-адреса. Например, чтобы отредактировать пользователя, вам может понадобиться такой маршрут, как /user/:id, чтобы получить данные для любого идентификатора, переданного в URL-адрес.

src/pages/users/[id].js сгенерирует маршрут типа /users/:idsrc/pages/users/[id]/group/[groupId].js сгенерирует маршрут типа /users/:id/group/:groupId

Ссылка: https://www.gatsbyjs.com/docs/reference/routing/file-system-route-api#creating-client-only-routes

Этот ответ очень поздний, но для тех, кто в будущем столкнется с этой проблемой, у меня есть более простое решение.

В терминах Гэтсби это называется Сплат Маршрут.

Например, если вам нужна какая-то страница «domain.com/profile/[id]», где id может быть любым числом, которое будет использоваться для отображения различных данных внутри веб-сайта, вы должны назвать свою страницу как [...id ].

Теперь внутри страницы вы можете получить доступ к этому идентификатору как

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

Примечание: не пропустите 3 точки, это то, что означает splat-маршрут в gatsby.