[Bug]: generateRoute() removing the last asterisk if it's part of the param string

[trainoasis]

What version of React Router are you using?

6.3.0

Steps to Reproduce

const path = generatePath("/route/:name", {
    name: "includes *asterisk at the end*",
})

Expected Behavior

I would expect for the above to return /route/includes *asterisk at the end*

Actual Behavior

It returns /route/includes *asterisk at the end

[timdorr]

I'm not 100% sure this is a valid bug. Yes, it's not doing what you're expecting, but that's also not a valid path, as * and spaces aren't valid characters (they should be URL encoded).

[trainoasis]

@timdorr thanks for your reply. Actually we used encodeURIComponent but this does not URL encode * by design.

Should we force URL encode this as a "unique" condition in our code as %2A? That also does not seem very nice to be honest, so I'm a little confused. What do you think?

[timdorr]

Sorry, I shouldn't have said asterisks are encoded. They are not according to the spec (section 2.2).

You can also use + for spaces in URLs. But what you're passing into generateRoute should use valid URL characters otherwise. Encoding them is a good first step.

[trainoasis]

We are in fact encoding, I just didn't show that in my initial post, we do use encodeURIComponent like so:

const path = generatePath("/route/:name", {
    name: encodeURIComponent("includes *asterisk at the end*"),
})

Unfortunately the asterisk at the end for some reason gets stripped, so there's only "ugly" solutions such as

1. manually add * it if it's at the end on the first place (after generatePath)
2. use something like str.replaceAll("*", "%2A"); before passing to generatePath

I guess it's only me running into this, so it seems will have to take one of the dirty approaches for now. If there's any other approaches or actual solutions I can take, I'd be happy to hear them. Thanks!

[Obi-Dann]

@trainoasis FYI, I've got a PR fixing the issue. generatePath will use safer parameter interpolation once it's merged. https://github.com/remix-run/react-router/pull/10078

[github-actions[bot]]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[brophdawg11]

This was released in 6.9.0