GatsbyJS错误地呈现URL



我在"pages"文件夹中的页面用小写名称调用,如下所示:

pages
├── 404.js
├── faq.js
├── addresses.js
├── service
│   ├── service1.js
│   └── service2.js
└── services.js

Gatsby应该给他们提供与这个小写名称相关的URL(比如pages/services.js的/services(,它在开发模式下工作,但在部署模式下(使用netlify(,它不会呈现页面,在重新加载时,它会将URL更改为以大写字母开头(比如/services(,然后加载。

其中最奇怪的是,有些页面可以工作(比如/faq,它与services.js完全重复,只更改了函数名(,而其他页面则不能。

服务代码.js:

import React from "react"
...
function Services() {
return (...)
}
export default Services

和faq.js的代码:

import React from "react"
...
function Faq() {
return (...)
}
export default Faq

全部。。。在两个文件中都相同

所有页面都通过盖茨比链接链接:

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>
...

以前我创建了文件夹"services",然后将其重命名为"service",也许这里出现了问题?但同时,链接到/addresses也不起作用,而且从来没有一个名为"addresses"的文件夹。

我尝试在元数据中设置siteUrl,但没有帮助。

我该如何解决这个问题?

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

import Link from 'gatsby-link'

然后:

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

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

siteUrl密钥进入gatsby-config.js中的siteMetadata

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`
},
...
}

我解决了这个奇怪的问题。

出于某种原因,我的计算机上以小写命名的文件(显示方式相同(以大写字母git开头。所以,如果你也有,请检查GitHub或你使用的任何其他git平台中的文件名。

更新后的解决方案:在阅读到GitHub在更新文件的大写更改方面存在一些问题(如果一个文件最初以Services.js的形式推送到GitHub,后来改为Services.js(后,他们建议删除该文件,并创建一个内容和名称相同的新文件,但文件名称的大小写为您喜欢的大小写。这对我有效。

老评论:

我也有类似的问题。你可以在一个实际的例子中看到这个问题:pearsondigitalmarketing.com,点击菜单,然后查看如何";"服务";以及";视觉;负载

该网站类似于OP,但以盖茨比Wordpress实验为主题。

我通过链接组件使用Chakra UI和Gatsby Link的组合,Services和Vision页面都在本地构建(Gatsby Development(中工作,但由于我的生产构建是使用我的GitHub存储库在Netlify上构建的,所以它找到了Vision和Services页面的大写版本。

这在某种程度上给页面最初加载带来了问题。

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

如果我刷新空白页面,在将非大写路由重新路由到大写路由(GitHub和Netlify认为这是正确的(后,页面将按预期加载

@dankondr也提到了这一点。

有人找到解决方案了吗?我想我需要弄清楚为什么GitHub在推送上使用这两个页面。或者我只需要从本地文件部署到Netlify/host,而不是使用GitHub

这与GitHub中页面文件的名称有关,由于某种原因,当推送到远程时,它们会变为大写。

最新更新