reactjs - 有什么方法可以使用模板组件/页面使用 Gatsby 创建动态 slugs？

Question

我对 Gatsby 很陌生，我想知道是否可以创建自定义路由(slugs)作为模板。用例是:

访问 /articles/name-of-the-article路线

服务组件Article.js填充了使用 name-of-the-article 从 API(即 Strapi headless CMS)检索到的信息蛞蝓。

Answer 1

经过一些调查，我发现使用 gatsby-plugin-create-client-paths 有更简单的方法来做到这一点。 .
您需要做的就是使用 yarn 安装它或 npm然后在 gatsby-config.js你将添加这些:

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

这意味着每个请求都像这样:/articles/the-slug将请求 articles.js页面和使用 Link由 Gatsby 提供，你可以通过 state 传递 props像这样的 Prop :
<Link to="/articles/the-slug" state={{ slug: "the-slug", ...etc }}>Anchor Text</Link>
这样，src/pages/articles.js成为前缀为 /articles 的 slug 的模板页面.