警告非确定性路由危险：尝试创建页面：[...] 已经存在

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 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-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,
      },
    })
  })
}

下面也是文件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

和文件category-template.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

为了解决这个问题，我做了很多研究，但在我想指出我之前已经清理并重新部署了几次相同的应用程序之前。所以到目前为止我尝试过的：

1. sudo gatsby clean && sudo gatsby develop 它工作后我做了 sudo gatsby build

部署构建文件夹后，某些页面无法正确呈现，因此我：

2. sudo m -rf node_modules sudo rm -rf public/并sudo rm -rf package-lock.json 与procedeed：
3. sudo npm install（如有必要，您必须这样做sudo nom install --unsafe-perm）和
4. sudo gatsby develop && sudo gatsby build

但不幸的是完全相同的结果：本地主机一切正常，并且在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 页面位于同一目录中”，但我不确定这是否准确，并且在官方文档中没有看到它显示不这样做的示例。

请指导我在这一点上找到一个潜在的解决方案。

Answer 1

您的问题取决于命名，我认为它将影响所有页面（机器人、医疗保健、技术等）。这：

\n

const robotics = () => {\n    return (\n        <Layout>\n            <SEO title="Robotics"/>\n            <Hero />\n            <h2>robotics page</h2>\n        </Layout>\n    )\n}\n\nexport default robotics\n

\n

应该：

\n

const Robotics = () => {\n    return (\n        <Layout>\n            <SEO title="Robotics"/>\n            <Hero />\n            <h2>robotics page</h2>\n        </Layout>\n    )\n}\n\nexport default Robotics\n

\n

注意大写的部分 ( Robotics)。这是因为，在 React 中，所有组件名称都必须大写，否则 React 的分配将永远不起作用。

\n

其余的代码，如果没有 CodeSandbox，很难检查，但看起来不错。

\n

此外，使用诸如 之类的插件也可能导致此行为gatsby-plugin-remove-trailing-slashes，因此请仔细检查您是否正在使用它。

\n\n

在问题的范围之外（并且由于sudo gatsby develop && sudo gatsby build），您似乎不知道gatsby develop和之间的区别gatsby build，它们不是互补的，并且使用该命令没有意义。

\n

总而言之，gatsby build创建一个具有生产就绪优化的站点版本，例如打包站点\xe2\x80\x99s 配置、数据和代码，并创建最终重新合并到React 应用程序中的所有静态 HTML 页面。

\n

gatsby develop仅在后台运行服务器，启用有用的功能，并针对快速反馈和额外的调试信息进行了优化。它不会捆绑和编译您的代码生产环境，可能隐藏 Netlify 中出现的一些问题，因为它运行gatsby build.

\n

使用该命令，您正在开发站点并通过运行 退出该进程gatsby build，而不提供服务。

\n

因此，为了在将站点推送到 Netlify 之前仔细检查您的站点，我建议在gatsby build && gatsby serve本地运行，因为如果 Netlify 和本地中的 Node 版本相同，则项目在两种环境中的行为必须相同。

\n

您可以阅读Gatsby 文档以获取更多说明。

\n\n

\n

我做了额外的研究，并研究了这篇文章，它代表了我遇到的完全相同的问题。不幸的是没有答案被接受。

\n

\n

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

\n