How to remove trailing slash?

[maxstoyanov]

I am using Remix 1.17 (all versions match) to deploy a site to Netlify. In my local testing and on Netlify I can access my routes with a trailing slash and without it.

There is no redirect to a version without a slash.

How do I configure this behavior?
My ideal behavior is to always redirect to the site without an additional slash.

[MichaelDeBoey]

@kentcdodds' Epic Stack has a great explanation about this! 👀

https://github.com/epicweb-dev/epic-stack/blob/main/docs/redirects.md#remove-trailing-slashes

[stephenwade]

If you're using the Remix App Server instead of the Express adapter, here's how to do the same thing inside a Remix loader.

Export this loader function from your app/root.tsx file:

export const loader = (async ({ request }) => {
  const { pathname, search } = new URL(request.url);

  if (pathname.endsWith('/') && pathname !== '/') {
    // Redirect to the same URL without a trailing slash
    throw redirect(`${pathname.slice(0, -1)}${search}`, 301);
  }

  return null;
}) satisfies LoaderFunction;

[deadcoder0904]

thanks @stephenwade, worked well for me.

[theocerutti]

there is actually a really annoying issue with that.
It's that if an action has been trigerred to navigate to that url with a trailing slash, if we redirect to remove the last slash it will NOT revalidate