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( 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, ]), }) ),