javascript - 如何在 gatsbyjs 中创建带参数的路由

Question

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

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

通常使用 react router 我会创建一个这样的路由:

<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项目？

Answer 1

您需要使用 Gatsby 在 gatsby-node.js 的 createPages 中为您提供的 createPage 方法应用程序接口(interface)。有 a guide在 Gatsby 文档中显示您可以实现这一点。 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',
    },
  });
};