javascript - 如何在gatsbyjs中使用参数创建路线

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

我有一个位于/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，但我猜这些路由不会静态生成。

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

最佳答案

您将要使用Gatsby在createPage的 gatsby-node.js API中提供的createPages方法。 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',
    },
  });
};

关于javascript - 如何在gatsbyjs中使用参数创建路线，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51988998/