gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 04:39:37 29 4
gpt4 key购买 nike

我想在我的 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项目?

最佳答案

您需要使用 Gatsby 在 gatsby-node.jscreatePages 中为您提供的 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',
},
});
};

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

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com