[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/TESTAB",
        "id": "TESTAB"
    },
    "location": {
        "pathname": "/ABC/TEST%257FAB",
        "search": "",
        "hash": "",
        "state": null,
        "key": "gqcl35xw"
    }
}

[jamescazzetta]

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

• https://github.com/remix-run/react-router/pull/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.