CODEWITHSUNDEEP
javascriptreactjsreact-routergatsby
GluePear
GluePear

Reputation: 7735

Modify routing in Gatsby site

I want to set up pagination in a Gatsby blog. In my pages/index.js page I am storing the posts, the "chunked" posts (e.g. chunks of 4 posts per page), and the current page number:

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

Currently, if I go to localhost:8000 it points to this component, loads the first 4 posts and displays them. I want to be able to go to localhost:8000/page2 and for this route to point to the same component. Currently it takes me to the 404 page. How can I modify the routing so that all pageX routes go to the same index.js component?

Upvotes: 2

Views: 3100

Answers (2)

Kyle Mathews
Kyle Mathews

Reputation: 3278

With Gatsby, you create routes programmatically.

Check out gatsby-paginate which makes it easy to create paginated index pages https://github.com/pixelstew/gatsby-paginate/

Upvotes: 3

Jonny Rathbone
Jonny Rathbone

Reputation: 179

If you use react-router you can just use <Route path="/" component={Blog} />

Any path that follows from the root "/" will go to the same Blog component (you can avoid this by declaring 'exact path' instead). I'm guessing you can use the url to determine which chunk you display then.

Upvotes: -1

Related Questions