GatsbyJS 不正确地呈现 URL

Question

我在“pages”文件夹中有我的页面，用这样的小写名称调用：pages├── 404.js├── faq.js├── addresses.js├── service│   ├── service1.js│   └── service2.js└── services.jsGatsby 应该为他们提供与此小写名称相关联的 URL（例如 /services 用于 pages/services.js），并且它在开发模式下工作，但在部署模式下（使用 netlify）它不会呈现页面并且在重新加载时会将 URL 更改为以大写字母开头（如 /Services），然后加载。最奇怪的是，有些页面可以正常工作（例如 /faq，它是 services.js 的完全副本，只更改了函数名称），而其他页面则不能。services.js 的代码：import React from "react"...function Services() {  return (...)}export default Services和faq.js的代码：import React from "react"...function Faq() {  return (...)}export default Faq所有 ... 在两个文件中都相同。所有页面都通过 Gatsby Links 链接：import { Link } from "gatsby"看起来像这样：...<div className="footer-column">    <div className="footer-header">For clients</div>    <Link to="/services/" className="footer-item"> // Problem one      Our services    </Link>    <Link to="/faq/" className="footer-item"> // Working fine      Frequently asked questions    </Link></div>...以前我创建文件夹“服务”，然后将其重命名为“服务”，也许这里出现问题？但同时链接到 /addresses 也不起作用，并且从来没有一个名为“addresses”的文件夹。我尝试在元数据中设置 siteUrl，但没有帮助。我该如何解决这个问题？

Answer 1

在没有看到任何实际代码的情况下，链接到 Gatsby 中页面的最简单方法（在我看来）是：

import Link from 'gatsby-link'

接着：

<Link to="/the-path-you-want-to-link-to">

  your link text

</Link>

只要您在文件中siteUrl配置了一个gatsby-config.js，您的链接路径就会附加到它并且链接应该可以工作。<a>您也可以随时使用标签对它们进行硬编码。

siteUrl钥匙siteMetadata进去_gatsby-config.js

module.exports = {

  siteMetadata: {

    title: `Gatsby Default Starter`,

    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,

    author: `@gatsbyjs`,

    siteUrl: `https://your-production-url.com`

  },

  ...

}

Answer 2

由于某种原因，在我的计算机上以小写字母命名的文件（显示方式相同）在 git 中以大写字母开头。因此，如果你也得到了它，请检查 GitHub 或你使用的任何其他 git 平台中的文件名。

Answer 3

更新的解决方案：在阅读了 GitHub 在更新文件大小写更改方面存在一些问题（如果文件最初以 Services.js 推送到 GitHub 后更改为 services.js），他们建议删除该文件并使用相同的内容和名称，但使用您喜欢的文件名大小写。这对我有用。

老评论：

我有一个类似的问题。您可以在一个实时示例中看到这个问题：pearsondigitalmarketing.com通过单击菜单然后查看“服务”和“视觉”如何加载。

该站点与 OP 相似，但使用 Gatsby Wordpress Experimental 主题构建。

我正在通过链接组件使用 Chakra UI 和 Gatsby Link 的组合，并且服务和视觉页面都在本地构建（Gatsby Develop）中工作，但是由于我的生产构建是使用我的 GitHub 存储库在 Netlify 上构建的，所以它找到了一个大写的页面视觉和服务的版本。

这以某种方式为页面最初加载造成了问题。

该页面加载一个空白的白色屏幕。

如果我刷新该空白页面，则在将非大写路由重新路由到大写路由之后，页面会按预期加载（GitHub 和 Netlify 认为是正确的）

@dankondr 也提到了这一点。

有没有人找到解决方案？我想我需要弄清楚为什么 GitHub 在推送时将这两个页面大写。或者我只需要从本地文件部署到 Netlify/host，而不是使用 GitHub