Question

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

这是我的布局页面/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>
  );
};

我要做的是，当用户单击侧边栏中的链接时，停留在大约位置上，但基于在大约侧边栏中单击的gatsby链接呈现新的组件或模板。

关于补充工具栏组件 /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>
  )
}

上面的链接有问题，他们正试图转到一个新页面。 /关于/工作 这不是我想做的。再次，我试图使它保持不变，但在内容div中渲染一个新组件。

就文档而言，请帮助gatsby遍地开花。好的，也许只是我而没有清楚地获取文档。谢谢

更新：我尝试添加一个页面，对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

经过很长时间的尝试来了解盖茨比之后，我可以说我仍然不了解它，因为它的文档非常庞大且不够清晰。但是一旦我开始研究node-api和onCreatePage，它就会给我一些想法。这就是文档所说的话。

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问题的，而不是针对我的问题的，但应该鼓励看到。

希望这对某人有帮助。

盖茨比页面中的页面

1 个答案: