如何在 gatsbyjs 中使用参数创建路由

Posted 2023-03-08

【中文标题】如何在 gatsbyjs 中使用参数创建路由

【英文标题】：How to create routes with params in gatsbyjs

【发布时间】：2019-01-30 00:31:38

【问题描述】：

我想在我的 gatsby 生成的网站中创建一个使用 slug 作为参数的路由。

我有一个位于/projects/<slug> 路线上的项目列表。

通常使用 react 路由器我会创建这样的路由：

<Route exact path='/projects/:project' component=Projects /> 

似乎在 gatsby 中，我必须在 ./pages 目录下创建一个新文件并创建一个新路由。我有一个名为 projects 的页面，我尝试在其中查找路由参数，但似乎只得到 404 页面。

// ./pages/projects.js

class SingleProject extends Component 

  state = 
    project: 
  

  componentDidMount()
    const project = this.props.projects.find(project => project.slug === this.props.match.params.project)
    this.setState(project)
  

  render() 
    return (
      <div className="single-project" >
      </div>
    )
  


export default SingleProject;

如何在 gatsby 中获得带参数的路由？

我刚刚遇到client only routes，但我猜这些路由不会是静态生成的。

我将有一个预定义的 slug 列表，所以也许有一种方法可以为每个项目 slug 创建一个页面？我想我可以在我拥有的 ./pages/projects/<slug> foreach 项目中手动创建一个文件？

【问题讨论】：

问题名称具有误导性，因为它与查询参数混淆，可能使用变量代替：en.wikipedia.org/wiki/Query_string

【参考方案1】：

您需要使用 Gatsby 在 gatsby-node.js 的 createPages API 中提供的 createPage 方法。 Gatsby 文档中有a guide 表明您完全可以实现这一点。 Here's an even simpler example 来自类似问题。

export const createPages = ( actions ) => 
  const  createPage  = actions;

  createPage(
    path: '/projects/hello-world',
    component: SingleProject,

    // Send additional data to page component
    context: 
      id: 'hello-world',
    ,
  );
;

【讨论】：

谢谢，这就是我要找的。​​span>