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

Trailing slashes cannot be forced #3402

Closed
lgraubner opened this Issue Jan 3, 2018 · 8 comments

Comments

Projects
None yet
4 participants
@lgraubner

lgraubner commented Jan 3, 2018

Description

Trailing slashes seem to be optional. I want to force trailing slashes and do so with Netlify. But once the initial page is displayed react-router takes over and the pages are reachable with and without /. How can I redirect to the trailing slash version? Could not find any examples, just the remove trailing slashes plugin.

Environment

Gatsby version: 1.9.149
Node.js version: 9.3.0
Operating System: MacOS

@benjaminhoffman

This comment has been minimized.

Member

benjaminhoffman commented Jan 4, 2018

What about reverse engineering the remove trailing slash plugin to do what you want? Specifically, updating this line? https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-remove-trailing-slashes/gatsby-node.js#L2

Not sure if that will work as expected but just a thought. Worth a try.

@lgraubner

This comment has been minimized.

lgraubner commented Jan 4, 2018

Thanks for your idea, I already tried this. But this plugin is not working for me at all, even as it is. I don't know how it's supposed to work, doesn't make sense to me.

@benjaminhoffman

This comment has been minimized.

Member

benjaminhoffman commented Jan 5, 2018

@lgraubner strange bc I've experienced the same. I think there may be something wrong? https://twitter.com/benhoffman_/status/934497974553595909

@ryanwiemer

This comment has been minimized.

Contributor

ryanwiemer commented Jan 26, 2018

@lgraubner or @benjaminhoffman any luck with this?

I chose not to do trailing slashes on my website but I noticed an issue whenever a slash got accidentally added to the URL. The slug would just get appended to the URL for example www.example.com/page1/page2. This is particularly a problem when Facebook mysteriously decides to add a trailing slash when I share a link.

Should this be resolved at the Netlify level perhaps? I'm not sure the best way to handle this but the gatsby-plugin-remove-trailing-slahes did nothing for me either. I don't really care if links have a slash or not but I feel like I should stick with one and force it but I'm not sure how.

Appreciate any advice if you have any.

Thanks,
Ryan

@lgraubner

This comment has been minimized.

lgraubner commented Jan 26, 2018

Sadly I still don't have a real solution. I can't even find a Netlify Option to force trailing slashes (or the opposite). The only thing I did was adding a canonical with trailing slash as well as making sure all internal link have the trailing slash.

<link
  rel="canonical"
  href={`https://larsgraubner.com${location.pathname.replace(/\/?$/,  '/')}`}
/>
@ryanwiemer

This comment has been minimized.

Contributor

ryanwiemer commented Jan 26, 2018

@lgraubner gotcha. Thanks for responding.

@KyleAMathews any advice for this particular issue of whether or not to have a trailing slash and the proper method for forcing that? I noticed on https://www.gatsbyjs.org/ all URLs have a trailing slash and it is forced.

It would be great to come to some type of consensus especially since if you mix and match it has negative effects on Gatsby powered sites.

@joakimlustig

This comment has been minimized.

joakimlustig commented Jan 29, 2018

I have problems with this as well, gatsby-plugin-remove-trailing-slahes doesn't seem to do anything about the urls. I'm also using gatsby-plugin-canonical-urls to generate canonical urls, and that plugin creates canonical urls without trailing slash for my blog posts.

So I have links that automatically goes to the posts with a trailing slash added, and canonical urls generated without trailing slash. I just noticed that this actually makes my blog posts non-indexable by google.

@lgraubner

This comment has been minimized.

lgraubner commented Feb 21, 2018

I discovered that if I disable gatsby-plugin-offline (which I'm using) it seems to work.

The reason is the default navigateFallbackWhitelist regex:

{
    resolve: 'gatsby-plugin-offline',
    options: {
        navigateFallbackWhitelist: [/^.*(?!\.\w?$)/],
    }
}

This basically says the service worker should handle everything but URL's ending with a file extension. Therefore it's not reaching Netlify to rewrite it to a trailing slash. Solution is simply adjusting the regex:

options: {
    navigateFallbackWhitelist: [/\/$/]
}

Seems to work fine for me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment