Question

我正在尝试以编程方式在这些页面上创建具有动态路由的页面，但是遇到了无法创建动态路由的问题。

我的gatsby-node.js中有

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

我的gatsby-config.js是：

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

然后我正在使用到达路由器来创建以下路线：：位置/详细信息/常见问题：位置/详细信息/联系方式等等...

但是它与路由不正确匹配。

Answer 1

将变量（动态路由）传递到生成的页面的唯一方法是通过context。

您需要在exports.onCreatePage = ({ page, actions }) => {...}的{{1}}中设置路线：

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

此article讨论了与您类似的用例和问题。

如何在Gatsby中以编程方式创建的页面上创建自定义路线

1 个答案: