gatsby-plugin-remove-trailing-slashes

gatsby-plugin-remove-trailing-slashes

Please Note: This plugin will soon be deprecated, please use Gatsby's trailingSlash option. Read the documentation to learn more.

This plugin removes trailing slashes from your project's paths. For example, yoursite.com/about/ becomes yoursite.com/about.

Important considerations

This plugin is intended to remove trailing slashes from paths generated by Gatsby itself.

This however does not prevent the resolution of pages that have trailing slashes, due to the way browsers are built to interpret URLs as paths.

This means that a user will need to take the extra step of ensuring that all router links direct towards paths that do not end in a slash.

For example, <Link to="/about/"> will render the view related to /about but will display as /about/ in the browsers address bar.

This is an important factor when relying on path driven logic, such as in the use case of the Link components activeClassName and activeStyle props.

For example, if the current route is /about, the component <Link to="/about/" activeStyle={{ color: 'rebeccapurple' }}> wouldn't match because of the slash.

Netlify Trailing Slashes

Netlify users should also take into account that the service will match paths to redirect rules regardless of whether or not they contain a trailing slash, potentially causing infinite redirect loops and unexpected behaviors.

This can be negated through the use of their Pretty URL feature, which rewrites URLs to pretty URLs.

Please see the Netlify docs for more information: https://docs.netlify.com/routing/redirects/redirect-options/#trailing-slash

Usage

Install:

npm install --save-dev gatsby-plugin-remove-trailing-slashes

Then configure via gatsby-config.js.

{
  ...
  plugins: [
    ...,
    `gatsby-plugin-remove-trailing-slashes`,
  ]
}

That's it.