如何在 gatsby 中创建动态路由

Question

我已经使用这个link 设置了 gatsby 项目。它工作正常。

现在我知道如何通过在 pages 文件夹中定义组件来创建路由。但是现在我有一个新的挑战，我需要创建一个动态路由，以便我可以在其中传递我的 id（就像 reactjs）。

<Route path: "/path/:id"/>

如何在 gatsby 中做到这一点？

Answer 1

这个答案超级晚了，但是对于以后遇到这个问题的人来说，我有一个更简单的解决方案。

在 Gatsby 中，它被称为Splat Route。

例如，如果您想要某个页面“domain.com/profile/[id]”，其中 id 可以是任何数字，用于在网站内显示不同的数据，您应该将您的页面命名为 [. ..id].

现在在页面内你可以访问这个 id

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

注意：不要错过 3 个点，这在 gatsby 中表示 splat 路线。

Answer 2

您可以在文件路径中使用方括号([ ]) 来标记URL 的任何动态段。例如，为了编辑用户，您可能需要像 /user/:id 这样的路由来获取传递到 URL 中的任何 id 的数据。

src/pages/users/[id].js 将生成类似/users/:id 的路由 src/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

Answer 3

你必须明确告诉 gatsby 路径应该是动态的。来自docs：

// 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/* 的所有内容。你应该像往常一样在道具中找到你的id。

看看他们的身份验证示例https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth

Answer 4

您可以使用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/