GatsbyJS 不正确地呈现 URL

Question

我在“pages”文件夹中有我的页面，用这样的小写名称调用：

pages

├── 404.js

├── faq.js

├── addresses.js

├── service

│   ├── service1.js

│   └── service2.js

└── services.js

Gatsby 应该为他们提供与此小写名称相关联的 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">&nbsp; your link text</Link>只要您在文件中siteUrl配置了一个gatsby-config.js，您的链接路径就会附加到它并且链接应该可以工作。<a>您也可以随时使用标签对它们进行硬编码。siteUrl钥匙siteMetadata进去_gatsby-config.jsmodule.exports = {&nbsp; siteMetadata: {&nbsp; &nbsp; title: `Gatsby Default Starter`,&nbsp; &nbsp; 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.`,&nbsp; &nbsp; author: `@gatsbyjs`,&nbsp; &nbsp; siteUrl: `https://your-production-url.com`&nbsp; },&nbsp; ...}

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