如何在盖茨比中创建动态路线

Question

我已经使用此 链接 设置了gatsby项目。它工作正常。

现在，我知道如何通过在 pages 文件夹内定义组件来创建路由。但是现在我面临一个新挑战，我需要创建一条动态路线，以便我可以通过
id 它（就像一样reactjs）。

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

如何在盖茨比做到这一点？

Answer 1

您必须明确告诉gatsby路径应该是动态的。从文档：

// 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