createPages在盖茨比问题;重复和未渲染的内容

Question

我在尝试渲染单个博客文章时出现了一些错误。

我尝试使用/post/{post_name}的页面模板，我得到这个错误:

警告不确定路由危险:尝试创建页面:"/blog/&quot页面"/blog"已经存在这可能导致不确定的路由行为

我再次尝试/blog/{post_name}。

我现在有两条路线，我不知道如何清理;但更重要的是，在这些页面上，没有任何呈现，即使应该有一个h1，其innerhtml设置为节点。标题和内容的div。

我已经把我的配置和组件上传到https://github.com/zackrosegithub/gatsby，这样你就可以看看了。

不确定如何修复

我只想看到我的内容呈现在屏幕上。

当没有内容渲染时，开发人员工具似乎没有帮助，因为我找不到任何可以检查的东西来尝试以另一种方式访问它。

谢谢你的帮助

Answer 1

你的方法部分正确。您正在使用基于承诺的方法，但是当使用then()时，您已经解决并部分解决了它，因此您不需要使用resolve()的回调，这可能会导致承诺函数的重复，因此请尝试删除它。

此外，您可能希望使用更友好的方法使用async/await函数。比如:

exports.createPages = async ({ graphql, actions, reporter }) => {
const yourQuery= await graphql(
`
{
allWordpressPost {
edges{
node{
id
title
slug
excerpt
content
}
}
}
}
`
if (yourQuery.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`);
return;
}

const postTemplate = path.resolve("./src/templates/post.js")
_.each(yourQuery.data.allWordpressPost.edges, edge => {
createPage({
path: `/post/${edge.node.slug}/`,
component: slash(postTemplate),
context: edge.node,
})
})
})
// and so on for the rest of the queries
};

另外，在你的postTemplate中放置一个console.log(pageContext)来获取到达那个点的内容，并将模板命名为:

const Post = ({pageContext}) => {
console.log("your pageContext is", pageContext); 
return  <div>
<h1>
{pageContext.title}
</h1>
</div>
}
export default Post;