Best practice for path params that require URI encoding

[mn-prp]

I have an app that has some path parameters that are derived from user-generated data, and I therefore need to URI encode them (since they'll likely include special characters like spaces and apostrophes). I noticed, however, that generatePath does not encode the parameters that I pass it, unlike if I were to use the browser's native URL constructor. That seems a little odd, but it made me wonder what the community's sense of the best practice is here. Should I wrap generatePath (and useParams??) with my own wrapper function to do the encoding/decoding? I can't see a reason why I would ever not want the path to be encoded.

[kiliman]

Here's a workaround. Although I do thing that generatePath should probably do this by default.

  const path = generatePath('/test/:id', { id: 'this is a test' })
  const url = new URL(path, 'http://localhost')

  console.log({ path, url: url.pathname })

[mn-prp]

It would be super cool if generatePath handled this out of the box, but I don't think your workaround is robust enough for my situation, since {id: 'blah?/fjew'} breaks the test case and throws an error.

I think in the short term, I'll do something like this:

export const generatePath: GeneratePath = (pattern, params) => {
  if (params) {
    Object.keys(params).forEach((p) => {
      const value = params[p as keyof typeof params]
      if (value == null) return
      params[p as keyof typeof params] = encodeURIComponent(value)
    })
  }

  return originalGeneratePath(pattern, params)
}

But I'll hope that the library eventually handles the case. Do you think a PR would be welcome? Or I suppose I should open an issue? (I just now notice that I'm in the remix discussion board but probably should be in react-router.