[Bug]: Wildcard in route path incorrectly decodes the uri fragment.

[mrxdst]

What version of React Router are you using?

6.0.1

Steps to Reproduce

https://stackblitz.com/edit/github-tm3ka5?file=src/App.tsx

Expected Behavior

We encode 2 uri components and expect to decode 2 uri components.

Actual Behavior

We incorrectly end up with 4 uri components

[htdangkhoa]

Hi @mrxdst , I see the behavior is the same with the a tag

[mrxdst]

I believe I've found the issue.

In the matchPath function.

Change the following:

memo[paramName] = safelyDecodeURIComponent(
  captureGroups[index] || "",
  paramName
);

To:

if (paramName === "*") {
  memo[paramName] = safelyDecodeURI(
    captureGroups[index] || "",
    paramName
  );
} else {
  memo[paramName] = safelyDecodeURIComponent(
    captureGroups[index] || "",
    paramName
  );
}

The value of the * param might not be a single uri component. Therefor decodeURI should be used instead.

[brophdawg11]

useParams always gives back decoded values, so if you're doing additional /-delimiting within the splat route you'll need to implement your own logic to parse that out correctly. useLocation().pathname will contain the encoded pathname so you can do you manual decoding from there as well.