Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Internal Link Routing for Tags and Previous/Next Buttons Not Working Properly #25500

Closed
caljup opened this issue Jul 3, 2020 · 2 comments
Closed
Labels
status: needs more info Needs triaging and reproducible examples or more information to be resolved

Comments

@caljup
Copy link

caljup commented Jul 3, 2020

I've had a Gatsby site now for close to a year, and after updating the CLI and React today internal linking has been acting weird. I didn't change anything else and reviewed all dependencies, but the problem persists.

Essentially for my blog I have a tags page programmatically generated from markdown files with the appropriate information queried from GraphQL. Before the update I would click on a tag and a feed of posts under that tag would be displayed that when you click a post would route you to a URL like this: www.thisisasite.com/blog-post, but now if I click a post in the feed instead it tries to navigate to www.thisisasite.com/tags/tag/blog-post which results in a 404 error.

The same thing occurs on each post where I have a Next and Previous button to switch between posts. In that case if you hit Next instead of going to www.thisisasite.com/blog-post-2 it tries to navigate to www.thisisasite.com/blog-post-1/blog-post-2.

Normal site directory is set up with pages, templates, and styles all in separate folders underneath. The markdown posts are located in a folder under the pages folder.

When I query the slug I set up routing according to documentation with: , but it's still giving me the above error.

Under gatsby-node.js I have everything set up exactly based on the documentation here: https://www.gatsbyjs.org/docs/adding-tags-and-categories-to-blog-posts/

This is the code for creating each page:

    //Create single page posts
    posts.forEach(({node}, index) => {
        createPage({
            path: node.fields.slug,
            component: templates.singlePost,
            context: {
                // Passing slug for template to use to get post
                slug: node.fields.slug,
                prev: index === 0 ? null : posts[index - 1].node,
                next: index === (posts.length - 1) ? null : posts[index + 1].node
            },
        })
    })

    //Get all tags
    let tags = []
    _.forEach(posts, edge => {
        if (_.get(edge, 'node.frontmatter.tags')) {
            tags = tags.concat(edge.node.frontmatter.tags)
        }
    })

    //Removes duplicate tags
    tags = _.uniq(tags)


    //Create Pages for Tag Posts
    tags.forEach(tag => {
        createPage({
            path: `/tag/${slugify(tag)}`,
            component: templates.tagPosts,
            context: {
                tag,
            },
        })
    })
})

}

Config file is set as:

`gatsby-plugin-react-helmet`,
`gatsby-plugin-sass`,
`gatsby-transformer-remark`,
`gatsby-plugin-catch-links`,
`gatsby-plugin-remove-trailing-slashes`,
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: `${__dirname}/src/images/`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `pages`,
    path: `${__dirname}/src/pages/`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `markdown-posts`,
    path: `${__dirname}/src/pages/markdown-posts/`,
  },
},
{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `fonts`,
    path: `${__dirname}/src/styles/fonts/`,
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-background-image`,
`gatsby-plugin-styled-components`,

My inclination is that after the update the pre-rendering for paths with is bugging out and trying to create paths for posts on pages using the current directory or component as the root instead of the main domain.

Any help much appreciated or if y'all have seen anything like this happening since the update.

@caljup caljup added the type: question or discussion Issue discussing or asking a question about Gatsby label Jul 3, 2020
@gatsbot gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jul 3, 2020
@caljup caljup changed the title Link Routing for Tags and Previous/Next Buttons Not Working Properly Internal Link Routing for Tags and Previous/Next Buttons Not Working Properly Jul 3, 2020
@LekoArts LekoArts added status: needs more info Needs triaging and reproducible examples or more information to be resolved and removed status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer type: question or discussion Issue discussing or asking a question about Gatsby labels Jul 3, 2020
@LekoArts
Copy link
Contributor

LekoArts commented Jul 3, 2020

Hi, thanks for the issue!

We recently fixed a broken behavior: #24054
TL;DR: Link now also supports relative links.

Can you please share a reproduction of your problem, a link to your repo, or check whether your links all begin with a / or not? Because if not they are all relative.

@caljup
Copy link
Author

caljup commented Jul 3, 2020

Added in the linking with / and that fixed the problem. Since Link now supports relative links, links to internal pages from current route will treat the current directory as having a trailing slash, which was why www.thisisasite.com/blog-post would set the link to the next post as www.thisisasite.com/blog-post/blog-post 2.

Solutution was easy enough. If you have a link going to programatically generated slugs and you are passing 'slug' into the component code previously looked like this

            <Link to = {slug}}>
                {title}
            </Link>

Just changed link to {/${slug}} and that fixed the issue

            <Link to = {`/${slug}`}>
                {title}
            </Link>

Thanks for your help @LekoArts

@caljup caljup closed this as completed Jul 3, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: needs more info Needs triaging and reproducible examples or more information to be resolved
Projects
None yet
Development

No branches or pull requests

2 participants