From 9c2e5ae8d13c4ee03b256ba7782748c207ac1605 Mon Sep 17 00:00:00 2001
From: Matt Brophy <matt@brophy.org>
Date: Mon, 28 Nov 2022 17:30:33 -0500
Subject: [PATCH] Ensure backwards-compatibility with navigator.encodeLocation
 (#9647)

* Ensure backwards-compatibility with navigator.encodeLocation

* add changeset
---
 .changeset/hungry-eyes-cheat.md      | 5 +++++
 packages/react-router-dom/index.tsx  | 4 +++-
 packages/react-router/lib/context.ts | 3 ++-
 packages/react-router/lib/hooks.tsx  | 8 ++++++--
 4 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hungry-eyes-cheat.md

diff --git a/.changeset/hungry-eyes-cheat.md b/.changeset/hungry-eyes-cheat.md
new file mode 100644
index 0000000000..97b8c87d5a
--- /dev/null
+++ b/.changeset/hungry-eyes-cheat.md
@@ -0,0 +1,5 @@
+---
+"react-router": patch
+---
+
+backwards compatibility for encodeLocation
diff --git a/packages/react-router-dom/index.tsx b/packages/react-router-dom/index.tsx
index caf3248335..40bbb968f7 100644
--- a/packages/react-router-dom/index.tsx
+++ b/packages/react-router-dom/index.tsx
@@ -480,7 +480,9 @@ export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
     let routerState = React.useContext(DataRouterStateContext);
     let { navigator } = React.useContext(NavigationContext);
 
-    let toPathname = navigator.encodeLocation(path).pathname;
+    let toPathname = navigator.encodeLocation
+      ? navigator.encodeLocation(path).pathname
+      : path.pathname;
     let locationPathname = location.pathname;
     let nextLocationPathname =
       routerState && routerState.navigation && routerState.navigation.location
diff --git a/packages/react-router/lib/context.ts b/packages/react-router/lib/context.ts
index f64cd1ae09..6d19ea8340 100644
--- a/packages/react-router/lib/context.ts
+++ b/packages/react-router/lib/context.ts
@@ -107,7 +107,8 @@ export interface NavigateOptions {
  */
 export interface Navigator {
   createHref: History["createHref"];
-  encodeLocation: History["encodeLocation"];
+  // Optional for backwards-compat with Router/HistoryRouter usage (edge case)
+  encodeLocation?: History["encodeLocation"];
   go: History["go"];
   push(to: To, state?: any, opts?: NavigateOptions): void;
   replace(to: To, state?: any, opts?: NavigateOptions): void;
diff --git a/packages/react-router/lib/hooks.tsx b/packages/react-router/lib/hooks.tsx
index cc30137f11..38d430ed00 100644
--- a/packages/react-router/lib/hooks.tsx
+++ b/packages/react-router/lib/hooks.tsx
@@ -405,7 +405,9 @@ export function useRoutes(
           pathname: joinPaths([
             parentPathnameBase,
             // Re-encode pathnames that were decoded inside matchRoutes
-            navigator.encodeLocation(match.pathname).pathname,
+            navigator.encodeLocation
+              ? navigator.encodeLocation(match.pathname).pathname
+              : match.pathname,
           ]),
           pathnameBase:
             match.pathnameBase === "/"
@@ -413,7 +415,9 @@ export function useRoutes(
               : joinPaths([
                   parentPathnameBase,
                   // Re-encode pathnames that were decoded inside matchRoutes
-                  navigator.encodeLocation(match.pathnameBase).pathname,
+                  navigator.encodeLocation
+                    ? navigator.encodeLocation(match.pathnameBase).pathname
+                    : match.pathnameBase,
                 ]),
         })
       ),