盖茨比一页一页

Question

我正在使用 gatsby js 并试图弄清楚如何使用 Gatsby 链接在同一页面的 div 内呈现新组件的页面级侧边栏我可以使用 react-router-dom 来做到这一点，但在 Gatsby 中我可以做到find 是如何创建博客文章这让我发疯，因为我找到的每个教程都是相同的博客文章。

这是我的布局页面 /layouts/index.js

export default ({ children }) => (
  <div id="layout">
    <header>
      <h3>Header</h3>
      <MainNav />
    </header>
    {children()}
  </div>
)

关于页面 /pages/about.js

export default ({ location, match }) => {
  console.log('location = ', location, 'match = ', match );
  return (
    <div id="about">
      <SideBar />
      <div id="content">
        // . add child template or component for link clicked in sidebar
      </div>
    </div>
  );
};

我想要做的是，当用户单击侧边栏中的链接时，会停留在 about 上，但会根据在 about 侧边栏中单击的 gatsby-link 呈现新组件或模板。

关于侧边栏组件 /components/about/side-bar.js

const SideBar = () => {
  return (
    <div id="side-bar">
      {/* <li><Link to='/about?sort=name'>work</Link></li> */}
      <li><Link to="/about/work">work</Link></li>
      <li><Link to='/about/hobbies'>hobbies</Link></li>
      <li><Link to='/about/buildings'>buildings</Link></li>
    </div>
  )
}

上面的链接有问题，他们正试图转到一个名为的新页面。 /about/work 这不是我想要做的。同样，我试图让它保持不变，但在内容 div 中呈现一个新组件。

就文档而言，请帮助盖茨比无处不在。好吧，也许只是我，没有清楚地获得文档。谢谢

更新： 我尝试添加一个页面，起诉 createPage 对我有用，但它没有通过 match.params id

gatsby-node.js

exports.createPages = ({ boundActionCreators }) => {
  const { createPage } = boundActionCreators;
  const myComponent = path.resolve('src/pages/about/index.js');
  createPage({
    path: '/about/:id',
    component: myComponent
  })
}

Answer 1

经过很长时间试图理解 Gatsby，我可以说我仍然不理解，因为它的文档非常庞大而且不是很清楚。但是一旦我开始查看 node-apis 和onCreatePage，它就给了我一些想法。这就是文档的字面意思。

创建页面

创建新页面时调用。此扩展 API 可用于以编程方式操作由其他插件创建的页面，例如，如果您希望路径没有尾部斜杠。

所以这里唯一让我暗示这可能是帮助我的关键是这条线。用于以编程方式操作由其他插件创建的页面

无论如何，这至少让我写了一些代码。然后大约 3 小时后，我发现了一个插件，它正在做我试图用这种方法做的事情。该插件名为gatsby-plugin-create-client-paths关键是客户端路径！！！！！！

这让生命值得过！所以在我上面的例子中，我只想能够使用 Gatsby 的路由器（这只是幕后的 react-router-dom），将我和 id 或值传递给路由器 match.params 对象。它仍然没有，但它所做的是检查前缀后的任何路径，如/folder/在我的情况下'/about/work并使用模板组件重新创建页面（在我的情况下继续使用 pages/about/index.js），这是我的模板。既然我们在 /about/之后有 about/index.js 的永久渲染，那么我们可以使用一些内部 switch 语句来处理传递给 /about/index.js 的位置。仍然没有得到 match.params 更新，但我确实得到了 props.location.pathname; 这允许我提取前缀之后的所有内容以在 switch 语句中使用，以根据路由路径名呈现我的特定组件。这里有足够的兔子是一个粗略的解决方案，作为例子展示。

因此，将插件添加为 npm 安装。打开gatsby.config.js并将以下代码添加到导出中。

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-create-client-paths`,
      options: { prefixes: [`/about/*`] },
    },
  ]
} 

然后在我的主要关于页面 pages/about/index

import React from "react";
import SideBar from '../../components/about/side-nav';

export default (props) => {
  const { pathname } = props.location;
  var n = pathname.lastIndexOf('/');
  var pageId = pathname.substring(n + 1);

  const page = () => {
    switch(pageId){
      case '': 
        return (
          <div>Work Page</div>
        );
      case 'work':
        return (
          <div>Work Page</div>
        );
      case 'hobbies':
        return (
          <div>Hobbies Page</div>
        );
      case 'buildings':
      return (
        <div>buildings Page</div>
      );
    }
  }
  return (
    <div id="about">
      <SideBar />
      <div id="content">
        {page()}
      </div>
    </div>
  );
};

然后在我的侧边栏中，我这样称呼它。

  <li><Link to="/about/work">work</Link></li>
  <li><Link to='/about/hobbies'>hobbies</Link></li>
  <li><Link to='/about/buildings'>buildings</Link></li>

希望这会帮助其他人。毕竟，我开始真正质疑盖茨比的大部分内容，尤其是文档不是很清楚。根据对我的问题的回答，我想在 stackoverflow 社区中使用 Gatsby 的人并不多，这在您需要帮助时会令人担忧。看起来 Gatsby 的 github 社区确实很有帮助，但这应该是针对 bug 问题而不是像我这样的问题，但令人鼓舞。

希望这可以帮助某人。