如何在 gatsby 中创建动态路由

Posted 2023-02-21

【中文标题】如何在 gatsby 中创建动态路由

【英文标题】：How to create dynamic route in gatsby

【发布时间】：2019-09-09 10:31:17

【问题描述】：

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

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

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

如何在 gatsby 中做到这一点？

【参考方案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 路线。

【参考方案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

【讨论】：

为什么这不是公认的答案？

【参考方案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

【讨论】：

非常感谢。我可以从我的路由中删除 /app 吗？

是的，当然！调整gatsby-node.js中的配置(page.path.match(...))

我试过了。但不知道如何删除/app，只放/。你能指导我吗

在我看来，盖茨比不应该这样工作。如果您想要一个完全动态的页面，请查看 create-react-app。 Gatsby 是一个静态站点生成器，可以从静态内容生成页面。它可以处理动态内容，但如果你问我这不是主要目的。

Gatsby 不仅仅是一个静态网站生成器，您可以像使用 CRA 一样使用它构建应用程序

【参考方案4】：

您可以使用gatsby-plugin-create-client-paths。它使用matchPath。欲了解更多信息，请查看

https://www.gatsbyjs.org/docs/gatsby-internals-terminology/#matchpath https://www.gatsbyjs.org/packages/gatsby-plugin-create-client-paths/

【讨论】：

不是真的，我不认为这提供了动态路径的灵活性，只是更容易添加新路径。请参阅：“使用此插件可以简化创建具有静态呈现页面和“客户端路径”的“混合”Gatsby 应用程序。”