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

npm install gatsby-plugin-create-client-paths

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/dynamic/*`] },
    },
  ],
}

import React from "react"

const DynamicTemplate = ({ pageContext }) => {
  const { slug } = pageContext
  return (
    <div>
      <h1>动态路由页面</h1>
      <p>参数: {slug}</p>
    </div>
  )
}

export default DynamicTemplate

import React from "react"
import { graphql } from "gatsby"
import DynamicTemplate from "../components/DynamicTemplate"

const DynamicPage = ({ data }) => {
  return <DynamicTemplate pageContext={data.pageContext} />
}

export const query = graphql`
  query($slug: String!) {
    pageContext(slug: { eq: $slug }) {
      slug
    }
  }
`

export default DynamicPage

import React from "react"
import Layout from "../../components/Layout"
import DynamicPage from "../../templates/dynamic"

const DynamicSlugPage = () => {
  return (
    <Layout>
      <DynamicPage />
    </Layout>
  )
}

export default DynamicSlugPage