修改 Gatsby 站点中的路由答案

【问题标题】：Modify routing in Gatsby site修改 Gatsby 站点中的路由
【发布时间】：2018-04-21 16:51:41
【问题描述】：

我想在 Gatsby 博客中设置分页。在我的pages/index.js 页面中，我存储了帖子、“分块”帖子（例如，每页 4 个帖子的块）和当前页码：

this.state = {
  allPosts: props.data.allMarkdownRemark.edges,
  postChunks: [],
  currentpage: 0,
};

目前，如果我转到localhost:8000，它会指向这个组件，加载前 4 个帖子并显示它们。我希望能够转到localhost:8000/page2 并让这条路线指向 same 组件。目前它将我带到404 页面。如何修改路由，让所有pageX 路由都转到同一个index.js 组件？

【问题讨论】：

标签： javascript reactjs react-router gatsby

【解决方案1】：

使用 Gatsby，您可以通过编程方式创建路线。

查看 gatsby-paginate，它可以轻松创建分页索引页面https://github.com/pixelstew/gatsby-paginate/

【讨论】：

【解决方案2】：

如果你使用 react-router 你可以使用<Route path="/" component={Blog} />

从根“/”开始的任何路径都将转到同一个博客组件（您可以通过声明“确切路径”来避免这种情况）。我猜你可以使用 url 来确定你显示的块。

【讨论】：

是的，我想知道如何在 Gatsby 的架构、最佳实践等方面专门做到这一点。