我使用Gatsby和React完成了一个小型博客应用程序的编写。当我在当地试用时，一切都很好。因此，我继续使用gatsby build，并将构建文件夹部署到Netlify中。然而，在部署之后，一些页面的内容没有显示，尽管在本地一切都很好。
问题描述：我有一个带有"；Home"Healthcare"技术"Robotics"Posts"NewsLetter"；，并且每当用户点击例如"时；Robotics"；显示了该类别中的一系列帖子。现在在本地一切都很好，但一旦我部署，我只能看到"；帖子"；页面，其中包含所有帖子。导航栏中的其他选项不会呈现其他帖子类别。
下面是我从终端得到的错误：
warn Non-deterministic routing danger: Attempting to create page: "/healthcare/", but page "/healthcare" already exists This could lead to non-deterministic routing behavior
warn Non-deterministic routing danger: Attempting to create page: "/robotics/", but page "/robotics" already exists This could lead to non-deterministic routing behavior
warn Non-deterministic routing danger: Attempting to create page: "/technology/", but page "/technology" already exists This could lead to non-deterministic routing behavior
这让我认为有些页面没有在适当的时间呈现，然而，这并不能解释localhost完全工作和部署版本不正常工作之间的区别。
在我的gatsby节点.js下方
const path = require('path')
// create pages dynamically
exports.createPages = async ({ graphql, actions }) => {
// from actions we can destructure createPage
const { createPage } = actions
// below we will be running two queries at the same time
// instead of one query only
const result = await graphql(`
{
allMdx {
nodes {
frontmatter {
slug
}
}
}
category: allMdx {
distinct(field: frontmatter___category)
}
}
`)
result.data.allMdx.nodes.forEach(({ frontmatter: { slug } }) => {
createPage({
path: `/posts/${slug}`,
component: path.resolve(`src/templates/post-template.js`),
context: {
slug,
},
})
})
result.data.category.distinct.forEach(category => {
createPage({
path: `/${category}`,
component: path.resolve(`src/templates/category-template.js`),
context: {
category,
},
})
})
}
以下也是post-template.js文件
const PostTemplate = ({data}) => {
const {
mdx: {
frontmatter: {title, category, image, date},
body,},
} = data;
return (
<Layout>
<Hero/>
<Wrapper>
{/* post info */}
<article>
<Image fluid={image.childImageSharp.fluid} />
<div className="post-info">
<span>{category}</span>
<h2>{title}</h2>
<p>{date}</p>
<div className="underline"></div>
</div>
<MDXRenderer>{body}</MDXRenderer>
</article>
{/* banner */}
<article>
<Banner/>
</article>
</Wrapper>
</Layout>
)
}
export const query = graphql`
query GetSinglePost($slug: String) {
mdx(frontmatter: {slug: {eq: $slug}}) {
frontmatter {
title
category
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
body
}
}
`
const Wrapper = styled.section`
// style goes here ...
`
export default PostTemplate
和文件类别模板.js
const CategoryTemplate = props => {
console.log(props);
const {
pageContext: { category },
} = props;
const {
data: {
categories: {nodes:posts}
}
} = props;
return (
<Layout>
<Hero/>
<Posts posts={posts} title={`category / ${category}`}/>
</Layout>
)
}
export const query = graphql`
query GetCategories($category: String) {
categories: allMdx(sort: {fields: frontmatter___date, order: DESC}, filter: {frontmatter: {category: {eq: $category}}}) {
nodes {
excerpt
frontmatter {
title
author
category
date(formatString: "MMMM, Do, YYYY")
slug
readTime
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
id
}
}
}
`
export default CategoryTemplate
在robotics页面组件的结构下方(所有其他页面组件healthcare和technology具有相同的确切结构，因此我只包括一个)
robotics.js
const robotics = () => {
return (
<Layout>
<SEO title="Robotics"/>
<Hero />
<h2>robotics page</h2>
</Layout>
)
}
export default robotics
为了解决这个问题，我做了很多研究，但在此之前，我想指出的是，我已经清理并重新部署了几次相同的应用程序。到目前为止，我尝试了什么：
sudo gatsby clean && sudo gatsby develop工作后，我做了sudo gatsby build
部署构建文件夹后，一些页面无法正确呈现，因此I:
sudo m -rf node_modulessudo rm -rf public/和sudo rm -rf package-lock.json并进行以下操作：sudo npm install(如有必要，您必须执行sudo nom install --unsafe-perm)和sudo gatsby develop && sudo gatsby build
但不幸的是，结果完全相同：localhost everthing运行良好，在Netlify上，一些页面根本没有渲染。
所以我做了额外的研究，我研究了这篇文章，它代表了我遇到的同样的问题。遗憾的是，没有人回答。但我试图应用这个建议，事实上，在我的gatsby-node.js上，我有：
exports.createPages = async ({ graphql, actions, reporter }) => {
const yourQuery= await graphql(
`
{
parameters here
}
`
if (yourQuery.errors) {
reporter.panicOnBuild(`Error while running GraphQL query.`);
return;
}
但什么也没发生。
我也研究过这个和这个。这篇帖子说"；MDX页面当前不能与JSX页面在同一目录中；但我不确定这是否准确，也没有在官方文件中看到不这样做的例子。
请引导我找到关于这一点的潜在解决方案。
您的问题依赖于命名，我认为它会影响所有页面(机器人、医疗保健、技术等)。此：
const robotics = () => {
return (
<Layout>
<SEO title="Robotics"/>
<Hero />
<h2>robotics page</h2>
</Layout>
)
}
export default robotics
应为：
const Robotics = () => {
return (
<Layout>
<SEO title="Robotics"/>
<Hero />
<h2>robotics page</h2>
</Layout>
)
}
export default Robotics
请注意大写的组件(Robotics)。这是因为，在React中，所有组件名称都必须大写，否则，React的赋值将永远不起作用。
其余的代码，如果没有CodeSandbox，很难检查，但看起来不错。
此外，使用gatsby-plugin-remove-trailing-slashes等插件也可能导致这种行为，因此请仔细检查是否正在使用它。
在问题范围之外(由于sudo gatsby develop && sudo gatsby build)，您似乎不知道gatsby develop和gatsby build之间的区别，它们不是互补的，使用该命令没有意义。
总之，gatsby build创建了一个具有生产就绪优化功能的网站版本，例如打包网站的配置、数据和代码，并创建所有静态HTML页面，这些页面最终被重新水合到React应用程序中。
gatsby develop只是在后台运行一个服务器，启用了有用的功能，并针对快速反馈和额外的调试信息进行了优化。它不捆绑和编译您的代码生产环境，可能会隐藏Netlify中出现的一些问题，因为它运行gatsby build。
使用该命令，您正在开发您的站点，并通过运行gatsby build退出进程，而不为其提供服务
因此，在将站点推送到Netlify之前，要仔细检查您的站点，我建议在本地运行gatsby build && gatsby serve，因为如果Netlify和本地的Node版本相同，则项目在两种环境中的表现必须相同。
您可以阅读盖茨比的文档以获得进一步的解释。
我做了额外的研究，我研究了这篇代表我也有同样的问题。遗憾的是，没有人回答。
我回答了那个问题。错误输出可能是相同的，但它是由完全不同的用例引起的。在这种情况下，问题依赖于错误/未完成的承诺方法，并且它只影响动态页面，在您的情况下则相反。在您的场景中；静态"；页面是由于React无法解决组件分配问题而导致命名错误的问题。