[Bug]: encoded percentages in pathname get incorrectly decoded within router's navigate(obj)

[jamescazzetta]

What version of React Router are you using?

6.8.0

Steps to Reproduce

I am using createBrowserRouter to prohibit certain calls from happening, and when I do

	const router = createBrowserRouter([
		{
			path: '*',
			element
		}
	]);
	
	const _navigate = router.navigate.bind(router);
	
	router.navigate = (to, opts) => {
		const allowed = true
		if (!allowed) return null;
		return _navigate(to, opts);
	};
	return <RouterProvider router={router} />;

To reproduce, pass an object to to like the following:
{ pathname: 'ABC/TEST%257FAB' }

the percentage in the pathname is encoded (%25) and it seems that the component being initialized ends up with incorrect props.params.

Expected Behavior

{
    "params": {
        "*": "ABC/TEST%257FAB",
        "id": "ABC/TEST%257FAB"
    },
    "location": {
        "pathname": "/ABC/TEST%257FAB",
        "search": "",
        "hash": "",
        "state": null,
        "key": "gqcl35xw"
    }
}

Actual Behavior

{
    "params": {
        "*": "ABC/TEST�AB",
        "id": "TEST�AB"
    },
    "location": {
        "pathname": "/ABC/TEST%257FAB",
        "search": "",
        "hash": "",
        "state": null,
        "key": "gqcl35xw"
    }
}

[jamescazzetta]

Also linking this past ticket here as I think it's related:

• fix: make url-encoding history-aware #9496

The general question that arises is, do you support escaped percentages as path names, or, why wouldn't you support them? As far as I understand, it is totally a valid character (if escaped) or am I wrong here?

[DavidHenri008]

I am also having the issue.
In my case, the url is formed with the pattern /user/:userId.
The userId has a value of %a.
When encoded in the url I have /user/%25a.
This generates an error because react-router seems to decode it twice meaning it does a first pass and obtains /user/%a then it does it a second time and it fails because %a is, of course, a bad encoding.