时间戳

首页 > 解决方案 > 如何在 URL 开头的 Gatsby 中创建动态路由

gatsby - 如何在 URL 开头的 Gatsby 中创建动态路由

问题描述

我可以从 URL 的开头在 GatsbyJs 上创建动态路由吗？我发现的一些例子总是静态/：动态的，我可以这样：

<Route path: "/:category/read/:slug_post"/>

哪个“类别”总是会改变。

目前我在我的 gatsby-node.js 上使用这样的自定义路由。基础是“读取”的并且是静态的。

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions
  if (page.path.match(/^\/read/)) {
    page.matchPath = "/read/*"
    createPage(page)
  }
}

现在我不使用 GraphQL，在“pages”文件夹中创建了一个名为“read.js”的文件，其中包含如下代码：

import { Router as MyRouter } from "@reach/router"

<MyRouter>
  <Read path="/read/:category_slug/:post_id/:post_slug" />
</MyRouter>

在这里，我宁愿不遵循看起来的最佳实践。

标签： gatsby

解决方案

也许我不明白你想要做什么，但在我看来你不需要动态路由。如果您只是根据您需要的模式（例如/read/<category_slug>/<id>/<post_slug>）创建具有最终 URL 的每个页面，那么您应该已经准备就绪，并且不需要定义路由器。

请参阅Gatsby 博客启动器；在其中，页面是用创建的，path: post.node.fields.slug但没有什么能阻止你创建更复杂的路径。

推荐阅读