Ensure backwards-compatibility with navigator.encodeLocation (#9647)

* Ensure backwards-compatibility with navigator.encodeLocation * add changeset
remix-run · Nov 28, 2022 · 9c2e5ae · 9c2e5ae
1 parent d4c7399
commit 9c2e5ae
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 4 deletions.
diff --git a/.changeset/hungry-eyes-cheat.md 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
@@ -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
@@ -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
@@ -405,15 +405,19 @@ 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 === "/"
               ? parentPathnameBase
               : joinPaths([
                   parentPathnameBase,
                   // Re-encode pathnames that were decoded inside matchRoutes
-                  navigator.encodeLocation(match.pathnameBase).pathname,
+                  navigator.encodeLocation
+                    ? navigator.encodeLocation(match.pathnameBase).pathname
+                    : match.pathnameBase,
                 ]),
         })
       ),