Question

我想在我的gatsby生成的网站中创建一条以为参数的路由。

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

通常使用react路由器，我会像这样创建一条路由：

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

在盖茨比看来，我必须在./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>中为我拥有的每个项目手动创建文件吗？

Answer 1

您将要使用Gatsby在createPage的{{3}} API中提供的gatsby-node.js方法。 Gatsby文档中有createPages，说明您可以完全实现这一目标。 a guide来自类似问题。

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

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

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

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

1 个答案: