小编Der*_*yen的帖子

如何转到 gatsby 中的上一页 (history.goBack)

我正在研究盖茨比。我需要像以前使用 reactjs 一样返回隐私页面/链接。

<a onClick={() => this.props.history.goBack}>
  <button type="button" className="close_tab">
    <img src={Close} alt="" />
  </button>
</a>
Run Code Online (Sandbox Code Playgroud)

我怎样才能使用 gatsby 做到这一点?

javascript reactjs gatsby reach-router

8
推荐指数
2
解决办法
6198
查看次数

GatsbyJS:如何将数组存储在 Markdown 文件中?

假设我的 Gatsby 应用程序中有以下 index.md:

---
title: "Names"
numberOfNames: "3"
---
Run Code Online (Sandbox Code Playgroud)

现在我想在“names”标签下添加一个单独的名字数组,比如“Alex”、“Bill”、“Jack”。

我将如何在 Markdown 文件中表示该数组,以便稍后我可以在我的 .js 文件中对其进行迭代?

markdown yaml gatsby

5
推荐指数
1
解决办法
2483
查看次数

Gatsby 错误 [HPM] 尝试代理请求时发生错误 / 从 localhost:8000 到 http://localhost:4000 (ECONNREFUSED)

使用此 Starter 开发 Gatsby 应用程序 https://github.com/the-road-to-react-with-firebase/react-gatsby-firebase-authentication

当我在运行 Gatsby Develop 后尝试访问我的页面时,我在更新我的节点包后不断收到此 HPM 错误。该项目编译成功,但随后我在浏览器中收到此错误,但没有任何显示。

尝试代理时出错:localhost:8000/

这在终端中:

错误 [HPM] 尝试代理请求时发生错误 / 从 localhost:8000 到http://localhost:4000 (ECONNREFUSED

一旦我从gatsby-config.js它工作的文件和浏览器中生成的页面中删除 它:

module.exports = {
    developMiddleware: app => {
        app.use(
            proxy({
                target: "http://localhost:4000",
            })
        )
    },
}
Run Code Online (Sandbox Code Playgroud)

但是,然后我在终端中收到此错误:

在“/404.html”中加载页面查询结果时出错。查询未运行且未找到缓存结果。页面未找到/404.html

我想知道为什么 Proxy 不工作以及上面的模块导出到底在做什么。我觉得我正在做的这种解决方法不好。任何帮助或建议都会很棒!!

Github 仓库:

该项目的 GitHub 存储库

javascript proxy reactjs gatsby

5
推荐指数
2
解决办法
2万
查看次数

Gatsby 插件:如何将组件作为插件选项?

我正在尝试对现有的 Gatsby 插件进行改进,并且我想通过其配置条目将 React 组件传递给插件gatsby-config.js

  plugins: [
    {
      resolve: `gatsby-plugin-modal-routing`,
      options: { someComponent: SomeComponentClassOrFunction }
    },
Run Code Online (Sandbox Code Playgroud)

但是,我遇到的问题是我不知道如何使它工作。

如果我尝试将组件本身作为插件配置的一部分传递,它似乎与 JSON 进行了序列化,从而导致该类成为无用的对象。所以看来我必须传递一个路径字符串。

  plugins: [
    {
      resolve: `gatsby-plugin-modal-routing`,
      options: {
        modalComponentPath: path.join(__dirname, 'src/components/SomeComponent.js')
      }
    },
Run Code Online (Sandbox Code Playgroud)

但是,如果我尝试传递路径,则无法弄清楚如何使用它来加载插件内的组件。我试过使用动态节点导入(即。import(path).then(component => ...))...

  • 带有path.join-ed的路径__dirname
  • 使用相对路径 ( src/components/SomeComponent)
  • 具有本地路径相对路径 ( ./src/components/SomeComponent)
  • 有和没有尾随 .js

我不确定这是否是应用程序与插件的不同路径的某种问题,或者是否存在其他问题,但import无论如何使用似乎都不是Gatsby 式的解决方案。

所以,然后我发现了传递到插件中的loadPageloadPageSync函数......但那些也失败了。我尝试的每条路径都会导致组件返回......但它是一个“找不到页面”的组件(大概是因为我尝试传入的组件尚未作为页面添加)。

这似乎应该是一个简单的问题,至少对于之前研究过 Gatsby 插件的任何人来说:如果您希望插件将组件作为输入(作为函数/类或作为模块的路径)……您如何在插件中实际使用该组件?

我正在寻找的只是一个基本模式或对现有 Gatsby 插件中的一行的引用,该插件采用一个组件,或者类似的东西(我可以查找任何细节)。

javascript reactjs webpack gatsby

5
推荐指数
1
解决办法
436
查看次数

将 ImageSharp 作为字段添加到 MarkdownRemark 节点(不是 frontmatter)

我正在尝试执行以下 graphQL 查询:

 {
      allMarkdownRemark(
        limit: 1000
      ) {
        edges {
          node {
            id
            parent {
              id
            }
            fields{
              slug
              hero {
                childImageSharp {
                  fixed {
                    src
                  }
                }
              }
            }
            frontmatter {
              template
            }
          }
        }
      }
    }
Run Code Online (Sandbox Code Playgroud)

hero字段当前使用以下代码返回图像的路径:

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  // Add slug to MarkdownRemark node
  if (node.internal.type === 'MarkdownRemark') {
    const value = createFilePath({ node, getNode, basePath: 'library' })
    const { dir …
Run Code Online (Sandbox Code Playgroud)

graphql gatsby

3
推荐指数
1
解决办法
737
查看次数

标签 统计

gatsby ×5

javascript ×3

reactjs ×3

graphql ×1

markdown ×1

proxy ×1

reach-router ×1

webpack ×1

yaml ×1