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

Question

我使用 Gatsby 和 React 完成了一个小型博客应用程序的编写。当我在本地尝试时一切正常。所以我继续 gatsby build 并将构建文件夹部署到 Netlify。但是，部署后，尽管本地一切正常，但某些页面的内容未显示。

问题描述：我有一个导航栏，其中包含“主页”、“医疗保健”、“技术”、“机器人”、“帖子”、“时事通讯”和每次用户点击例如“机器人”时，都会显示该类别中的一系列 post。现在本地一切正常，但一旦我部署，我只能看到包含所有 post 的“帖子”页面。导航栏中的其他选项不会呈现其他 post 类别。

低于我从终端收到的错误：

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

这让我认为有些页面没有在正确的时间呈现，但是，这并不能解释本地主机正常工作和部署版本不正常工作之间的区别。

下面是我的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

和文件类别-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 具有完全相同的结构，因此我只包括一个）

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

部署构建文件夹后，一些页面无法正确呈现，所以我：

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 一切正常，在 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 and this too。 post 说“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 创建一个具有生产就绪优化功能的站点版本，例如打包站点的配置、数据和代码，并创建最终获得的所有静态 HTML 页面rehydrated 进入 React 应用程序。

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

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

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

您可以阅读 Gatsby docs 以获得进一步的解释。

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

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

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

warn Non-deterministic routing danger: Attempting to create page: [...] already exists

javascript

node.js

reactjs

gatsby

netlify