CODEWITHSUNDEEP
javascriptreactjsgatsby
Danny Adams
Danny Adams

Reputation: 173

How to remove the inserted page number from url in Gatsby

I am making a blog with Gatsby and have created "paginated pages" in the gatsby-node.js file as shown in the image. This makes a new page after a certain number of posts.

Then in my templates/allPosts.js file I map through the posts and have a <Link to={frontmatter.slug} /> for each post. All the links work fine on the first page but after that e.g. on page 2, the page number is inserted into the URL before the slug, but this is not the correct URL for the blog article. I need the page number to not be inserted.

Creating paginated pages in the gatsby-node.js file

Upvotes: 1

Views: 457

Answers (2)

Ferran Buireu
Ferran Buireu

Reputation: 29315

So, according to what you said, you want to keep the page structure (i.e: /blog/number/) but the post slug must remove the number, isn't?

Then, on the link to the post, use an absolute URL like: <Link to={`/blog/page-title`}> instead of <Link to={`page-title`}>. Note that if you want to remove and use absolute paths you must prefix the links with a slash (/). You can also check (because there's no code in your question) if using relative paths such as ../post-title works for you.

You may want to take a look at Gatsby's documentation about relative links.

Upvotes: 1

SimonW
SimonW

Reputation: 329

Based on the section in the Gatsby docs on relative links you should be able to prefix your slugs with /.. to remove the page component in your urls.

The <Link /> component follows the behavior of @reach/router by ignoring trailing slashes and treating each page as if it were a directory when resolving relative links. For example if you are on either /blog/my-great-page or /blog/my-great-page/ (note the trailing slash), a link to ../second-page will take you to /blog/second-page.

To keep things consistent, you might want to add the page number to the first page too.

Upvotes: 2

Related Questions