Fix percent encoding in relative path navigation

.changeset/gentle-doors-visit.md

@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+Fix percent encoding in relative path navigation

contributors.yml

@@ -481,3 +481,4 @@
 - zeromask1337
 - zheng-chuang
 - zxTomw
+- veeceey

packages/react-router/__tests__/dom/special-characters-test.tsx

@@ -761,6 +761,87 @@ describe("special character tests", () => {
         );
       }
     });
+
+    it("handles encoded percent signs in ancestor splat route segments", async () => {
+      let ctx = render(
+        <BrowserRouter
+          window={getWindow("/parent/child/percent-%25-sign")}
+        >
+          <App />
+        </BrowserRouter>,
+      );
+
+      expect(getHtml(ctx.container)).toMatchInlineSnapshot(`
+        "<div>
+          <a
+            data-discover=\"true\"
+            href=\"/parent/child/percent-%25-sign/grandchild\"
+          >
+            Link to grandchild
+          </a>
+        </div>"
+      `);
+
+      await fireEvent.click(screen.getByText("Link to grandchild"));
+      await waitFor(() => screen.getByText("Grandchild"));
+
+      expect(getHtml(ctx.container)).toMatchInlineSnapshot(`
+        "<div>
+          <a
+            data-discover=\"true\"
+            href=\"/parent/child/percent-%25-sign/grandchild\"
+          >
+            Link to grandchild
+          </a>
+          <h1>
+            Grandchild
+          </h1>
+          <pre>
+            {"*":"grandchild","param":"percent-%-sign"}
+          </pre>
+        </div>"
+      `);
+
+      function App() {
+        return (
+          <Routes>
+            <Route path="/parent/*" element={<Parent />} />
+          </Routes>
+        );
+      }
+
+      function Parent() {
+        return (
+          <Routes>
+            <Route path="child/:param/*" element={<Child />} />
+          </Routes>
+        );
+      }
+
+      function Child() {
+        let location = useLocation();
+        let to = location.pathname.endsWith("grandchild")
+          ? "."
+          : "./grandchild";
+        return (
+          <>
+            <Link to={to}>Link to grandchild</Link>
+            <Routes>
+              <Route path="grandchild" element={<Grandchild />} />
+            </Routes>
+          </>
+        );
+      }
+
+      function Grandchild() {
+        return (
+          <>
+            <h1>Grandchild</h1>
+            <pre>{JSON.stringify(useParams())}</pre>
+          </>
+        );
+      }
+    });
   });
 
   describe("when matching as part of the defined route path", () => {

packages/react-router/lib/hooks.tsx

@@ -888,12 +888,15 @@ export function useRoutesImpl(
           pathname: joinPaths([
             parentPathnameBase,
             // Re-encode pathnames that were decoded inside matchRoutes.
-            // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+            // Pre-encode `%`, `?` and `#` ahead of `encodeLocation` because it uses
             // `new URL()` internally and we need to prevent it from treating
             // them as separators
             navigator.encodeLocation
               ? navigator.encodeLocation(
-                  match.pathname.replace(/\?/g, "%3F").replace(/#/g, "%23"),
+                  match.pathname
+                    .replace(/%/g, "%25")
+                    .replace(/\?/g, "%3F")
+                    .replace(/#/g, "%23"),
                 ).pathname
               : match.pathname,
           ]),
@@ -903,12 +906,13 @@ export function useRoutesImpl(
               : joinPaths([
                   parentPathnameBase,
                   // Re-encode pathnames that were decoded inside matchRoutes
-                  // Pre-encode `?` and `#` ahead of `encodeLocation` because it uses
+                  // Pre-encode `%`, `?` and `#` ahead of `encodeLocation` because it uses
                   // `new URL()` internally and we need to prevent it from treating
                   // them as separators
                   navigator.encodeLocation
                     ? navigator.encodeLocation(
                         match.pathnameBase
+                          .replace(/%/g, "%25")
                           .replace(/\?/g, "%3F")
                           .replace(/#/g, "%23"),
                       ).pathname