diff --git a/packages/react-router/__tests__/useMatch-test.tsx b/packages/react-router/__tests__/useMatch-test.tsx
index 11dff9730d..debf9004dd 100644
--- a/packages/react-router/__tests__/useMatch-test.tsx
+++ b/packages/react-router/__tests__/useMatch-test.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import * as TestRenderer from "react-test-renderer";
-import { MemoryRouter, Routes, Route, useMatch } from "react-router";
+import { MemoryRouter, PathMatch, Routes, Route, useMatch } from "react-router";
function ShowMatch({ pattern }: { pattern: string }) {
return
{JSON.stringify(useMatch(pattern), null, 2)}
;
@@ -93,4 +93,45 @@ describe("useMatch", () => {
`);
});
});
+
+ describe("when re-rendered with the same URL", () => {
+ it("returns the memoized match", () => {
+ let path = "/home";
+ let match: PathMatch;
+ let firstMatch: PathMatch;
+
+ function HomePage() {
+ match = useMatch(path);
+
+ if (!firstMatch) {
+ firstMatch = match;
+ }
+
+ return null;
+ }
+
+ let renderer: TestRenderer.ReactTestRenderer;
+ TestRenderer.act(() => {
+ renderer = TestRenderer.create(
+
+
+ } />
+
+
+ );
+ });
+
+ TestRenderer.act(() => {
+ renderer.update(
+
+
+ } />
+
+
+ );
+ });
+
+ expect(match).toBe(firstMatch);
+ });
+ });
});
diff --git a/packages/react-router/index.tsx b/packages/react-router/index.tsx
index c12b300d07..09ef0f584e 100644
--- a/packages/react-router/index.tsx
+++ b/packages/react-router/index.tsx
@@ -431,7 +431,8 @@ export function useMatch(
`useMatch() may be used only in the context of a component.`
);
- return matchPath(pattern, useLocation().pathname);
+ let { pathname } = useLocation();
+ return React.useMemo(() => matchPath(pattern, pathname), [pathname, pattern]);
}
/**