javascript - 警告非确定性路由危险 : Attempting to create page: [. ..] 已经存在

Question

我使用 Gatsby 完成了一个小型博客应用程序的编写。和 React .
当我在本地尝试时一切正常。所以我继续 gatsby build并将构建文件夹部署到 Netlify .但是，部署后，尽管本地一切正常，但某些页面的内容并未显示。
问题描述 :我有一个导航栏，其中包含“家庭”、“医疗保健”、“技术”、“机器人”、“帖子”、“新闻通讯”，每次用户点击例如“机器人”时，该类别中的一系列帖子是显示。
现在本地一切正常，但一旦我部署，我只能看到包含所有帖子的“帖子”页面。导航栏中的其他选择不会呈现其他帖子类别。
在我从终端收到的错误下方:warn Non-deterministic routing danger: Attempting to create page: "/healthcare/", but page "/healthcare" already exists This could lead to non-deterministic routing behaviorwarn Non-deterministic routing danger: Attempting to create page: "/robotics/", but page "/robotics" already exists This could lead to non-deterministic routing behaviorwarn Non-deterministic routing danger: Attempting to create page: "/technology/", but page "/technology" already exists This could lead to non-deterministic routing behavior这使我认为某些页面没有在适当的时间呈现，但是，这并不能解释 localhost 完美运行与部署版本无法正常运行之间的区别。
下面是我的 Gatsby Node .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,
      },
    })
  })
}

下面也是文件 后模板.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 具有完全相同的结构，所以我只包括一个)
机器人.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

部署构建文件夹后，一些页面没有正确呈现，所以我:

sudo m -rf node_modules sudo 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 上有些页面根本没有呈现。
所以我做了额外的研究，我研究了 this post这代表了我遇到的同样的问题。不幸的是，没有接受任何答案。但我试图应用这个建议，事实上我的 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;
  }

但是什么也没发生。
我研究了 this和 this too .这篇文章说“MDX 页面当前不能与 JSX 页面位于同一目录中”，但我不确定这是否准确，并且在官方文档中没有看到显示不这样做的示例。
请指导我在这一点上找到一个潜在的解决方案。

Answer 1

您的问题取决于命名，我认为它会影响所有页面(机器人、医疗保健、技术等)。这个:

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创建一个具有生产就绪优化的站点版本，例如打包站点的配置、数据和代码，并创建最终获得 rehydrated 的所有静态 HTML 页面进入 React 应用程序。 gatsby develop只需在后台运行服务器，启用有用的功能，并针对快速反馈和额外的调试信息进行了优化。它不会捆绑和编译您的代码生产环境，可能会隐藏一些将出现在 Netlify 中的问题，因为它运行 gatsby build .
使用该命令，您正在开发您的站点并通过运行 gatsby build 退出该过程。 ，没有服务它。
因此，要在将站点推送到 Netlify 之前仔细检查您的站点，我建议您运行 gatsby build && gatsby serve本地，因为如果 Netlify 和本地的 Node 版本相同，则项目在两个环境中的行为必须相同。
您可以阅读 Gatsby docs以获得进一步的解释。

I did additional research and I studied this post which represents thesame exact problem I have. Unfortunately no answer was accepted.

我回答了那个问题。错误输出可能相同，但它是由完全不同的用例引起的。在这种情况下，问题依赖于错误/未完成的 promise 方法，它只影响动态页面，在你的情况下是相反的。在您的场景中，“静态”页面是由于命名错误导致的问题，因为 React 无法解决组件分配。