当你不知道路径时，在 gatsby 中动态创建页面

Question

我想在 gatsby 中创建动态页面，但我不知道完整的 url 名称是什么。

  createPage({
    path: '/account/orders/:id',
    matchPath: '/account/orders/:id',
    component: path.resolve('./src/templates/order.tsx'),
  });

我认为编写的代码可以访问任何 'id' 值的页面，但是在构建开发包时会出错 account\orders\:id contains invalid WIN32 path characters

':id' 值可以是任何值，所以我不想使用循环方法来创建页面。可以做什么？

Answer 1

考虑到：

• 您不想循环浏览页面
• 你永远不会知道id 的值

您唯一的机会是通过文件系统路由 API 使用 client-only routes。

在您的情况下，假设您的“未知”页面位于/account/orders 下，您应该创建一个文件夹结构，例如：src/pages/account/orders/[...].js。 [...].js 表示法代表undefined 值的文件系统路由。

在 [...].js 文件中，您可以创建如下内容：

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Profile from "../components/Profile"
import Default from "../components/Default"
import CustomOrderComponent from "../components/CustomOrderComponent"

const Orders = () => {
  return (
    <Layout>
      <Router basepath="/account/orders">
        <Profile path="/profile" />
        <CustomOrderComponent path='/:id' />
        <Default path="/" />
      </Router>
    </Layout>
  )
}

export default Orders

来自文档：

简而言之，当页面加载时，Reach Router 会查看 path 的属性 每个组件嵌套在<Router /> 下，并选择一个进行渲染 最匹配window.location（您可以了解更多关于如何 路由工作从@reach/router documentation)。在里面 /orders/profile 路径的情况下，Profile 组件将是 渲染，因为它的前缀匹配 /orders 的基本路径，并且 其余部分与孩子的路径相同。

在上述场景中，CustomOrderComponent 将呈现您的变量 id (:id)。