Как создать пользовательские маршруты поверх программно созданных страниц в Гэтсби

Question

Я пытаюсь программно создавать страницы с динамическими c маршрутами поверх них, но сталкиваюсь с проблемой, из-за которой не создаются динамические c маршруты.

в моем I gatsby - node.js have

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  {...graphql query}

  locations.forEach(edge => {
    createPage({
      path: `/${edge.node.path}/details`,
      component: path.resolve(`./src/templates/detailsTemplate.js`),
      context: { name: edge.node.name }
    })
  })
}

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  if (page.path.match(/^(.*?)\/details/)) {
    page.matchPath = "/details/*"

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

my gatsby-config. js is:

    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/details/*`] },
    },

Затем я использую роутер для создания маршрутов:: location / details / faq : location / details / contact et c ...

однако маршруты не совпадают правильно.

Answer 1

Единственный способ передать переменные (ваши динамические c маршруты) в сгенерированную страницу - это через context .

Вам нужно установить свои маршруты внутри вашего exports.onCreatePage = ({ page, actions }) => {...} в вашем gatsby-node.js:

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions
  createPage({
    path: node.fields.slug,
    component: path.resolve(`./src/templates/yourTemplate.js`),

    // ## PASS YOUR ROUTES HERE ##

    context: {
      faq: `faq/route`,
      contact: `contact/route`,
      etc: `etc/route`,
    },
  })
}

Затем задайте свои маршруты внутри yourTemplate.js:

const Article = ({ pageContext }) => {

  // Your routes are inside the pageContext prop
  console.log(pageContext.faq)
  // ...
}

В этой статье обсуждается аналогичный вариант использования и проблема, связанная с вашим.