[Bug]: generatePath strips trailing slashes

[mrginglymus]

What version of React Router are you using?

6.10.0

Steps to Reproduce

generatePath('/foo/')

Expected Behavior

/foo/

Actual Behavior

/foo

I'm guessing this is caused by #10078

[jdouitsis]

Hello, is anyone working on this issue?

[gmaxlev]

As far as I can see, generatePath removed the slash from the end because it interpreted it as an empty segment.

https://github.com/remix-run/react-router/blob/main/packages/router/utils.ts#L749

[timdorr]

This is correct. React Router treats the slash as a separator. So, in generating a path, we treat that final segment as an empty string and remove it for having no value. We always generate URLs without the trailing slash.

[mrginglymus]

Is there a recommended way to get back the original behaviour? This breaking change from the original behaviour of the code (which whilst did not document that it would preserve trailing slashes, did not also say that it would remove empty segments, because it didn’t) has caught us by surprise.

[mrginglymus]

I would be happy to provide a patch to restore the original behaviour; otherwise I’d suggest that further detail in the documentation and tests verifying the stripping of empty segments is added to help anyone else upgrading who was expecting preservation of trailing slashes

[fpasquet]

Yes, I agree that this is a breaking change, for all those who use React Router and who make SSG it is very problematic.
In our case, when we navigate to the search url:

export const PATHS = {
   ...
  SEARCH: '/:lang/search/',
};
...
navigate({
      pathname: generatePath(PATHS.SEARCH, { lang: i18n.language }),
      search: `search=${value}`,
    });

The generated url is /en/search?search=keyword
So when we refresh the page, we lose all the parameters of the request, because we are on static files. And that the correct url should be the one I wanted to generate /en/search?search=keyword .

Can add a trailingSlash option like on NextJS, https://nextjs.org/docs/api-reference/next.config.js/trailing-slash

[fpasquet]

This is correct. React Router treats the slash as a separator. So, in generating a path, we treat that final segment as an empty string and remove it for having no value. We always generate URLs without the trailing slash.

@timdorr Why close this topic ?

[Eliasvdb]

@timdorr Can this be reconsidered, or at least made backwards compatible? Due to the complex set-up of our project (a web app that is in transition phase and runs partly on an old AEM frontend with an Apache server which forces trailing slashes and partly on a SPA with react-router), we have a hard requirement at this moment to always end URL's with a trailing slash. Never had problem with this and react-router up until now, when we wanted to upgrade from 6.2.1 to 6.11.1. Due to the change in #10078 , all our navigates will get rid of this trailing slash which is not desired behavior at all for us after this upgrade. Furthest we can upgrade for now seems to be 6.8.2.

[alanjo4]

Hi @Eliasvdb did you mentioned that you were working on an old AEM frontend? Were you able to migrate to v6? I'm not able to do that and I'm still researching on how to do that, as you (probably) already know, maybe you notice that does not contain parent. There is a file called RouterHelper, but when I use my app is rendering a blank page without errors. I will really appreciate your hints, thanks in advance.

[Flaysh]

thank you

[samkuehn]

This is the hack that I came up with:

// HACK: always add trailing slash to path (works with query strings & anchors)
let path = generatePath(route.path, params);
path = path.replace(/\/?(\?|#|$)/, "/$1");