Parameter values are encoded (react-router v6)

[SpudNyk]

Version

react-router-dom@6.0.0-alpha.2

Test Case

https://codesandbox.io/s/react-router-tv3xb

Steps to reproduce

Use the test case and click on the parameter test links

Expected Behavior

The param values should not have % encoded characters.

Actual Behavior

The param values have encoded characters.

[timdorr]

The params are specifically not decoded right now. We still have that as an open question about how to handle it.

This has been an ongoing issue with the history library: remix-run/history#745 and remix-run/history#505 The plan there in 5.0 is just to not touch them at all. Let downstream libraries and users handle it if they want.

I think we'll take the same approach here, so it will be up to you to decode those values further. It's a similar philosophy to our query string handling (which we also don't parse).

[SpudNyk]

Maybe as the API is hooks based now maybe adding a parameter to useParams to either force raw values or force decoding could be added?

I feel that the principle of least surprise should apply here.

[bjarkehs]

I wonder what is actually least surprising. I think I'd want the raw param. If I wanted the decoded params I could easily create a useDecodedParams.

[CXuesong]

+1 for the raw params, while it would be helpful to also offer a shortcut to retrieve the decoded version.

As a question during parsing parameters, to decode or not may seem subtle, but when it comes to whether to encode parameters with generatePath, it will be difficult for react-router itself to determine between encodeURI and encodeURIComponent (e.g. I usually don't want slash to be escaped in the * parameter).

I guess it's good to keep path generation and parsing logic consistent, so it's best for react-router to expose the raw params for the users, while offering some snippets so users can tailor the raw parameters to their needs.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
You can add the fresh label to prevent me from taking any action.

[Kostanos]

Hey, I actually would like to have a raw parameter, and useParams returns decoded already.
Example:

path: /companies/Samsung%2CInc,Lenovo%2CInc

const params = useParams();
const companies = params.companies?.split(',');

Expected:
[
  'Samsung%2CInc',
  'Lenovo%2CInc',
]
Getting:
[
  'Samsung',
  'Inc',
  'Lenovo',
  'Inc',
]

Any recommendations here?

[kiliman]

Unfortunately you're going to have to parse it yourself.

const location = useLocation()
const companies = location.pathname.match(/^\/companies\/(.*)$/)![1];
console.log(companies.split(",").map((c) => decodeURIComponent(c)));

[Kostanos]

Oh man, this not good, I think there should be a hook to get the RAW params.
Meanwhile I created a small/simple gist if someone need it: https://gist.github.com/Kostanos/e3cc71b6263846cdd887395f505076c8

[kiliman]

True, but a library isn't going to cover everyone's needs. The fact that it's OSS means you can submit a PR, or at the very least, write your own code to handle your particular usecase.