reactjs - Gatsby 一页一页

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>
  );
};

我想做的是，当用户单击侧栏中的链接时，保留在 about 上，但根据在 about 侧栏中单击的 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

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

onCreatePage

Called when a new page is created. This extension API is useful for programmatically manipulating pages created by other plugins e.g. if you want paths without trailing slashes.

所以这里唯一给我暗示的部分可能是帮助我的关键是这一行。 对于以编程方式操作其他人创建的页面很有用插件

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

这让生活变得有值(value)!所以在上面的例子中，我只是想能够使用 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>

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

希望这对某人有帮助。