diff --git a/.changeset/long-beds-accept.md b/.changeset/long-beds-accept.md
new file mode 100644
index 0000000000..0b188a9a25
--- /dev/null
+++ b/.changeset/long-beds-accept.md
@@ -0,0 +1,5 @@
+---
+'@backstage/core-plugin-api': patch
+---
+
+useRouteRef - Limit re-resolving to location pathname changes only
diff --git a/packages/core-plugin-api/src/routing/useRouteRef.test.tsx b/packages/core-plugin-api/src/routing/useRouteRef.test.tsx
index 62f6d6da42..618f40d281 100644
--- a/packages/core-plugin-api/src/routing/useRouteRef.test.tsx
+++ b/packages/core-plugin-api/src/routing/useRouteRef.test.tsx
@@ -16,10 +16,11 @@
import { renderHook } from '@testing-library/react-hooks';
import React from 'react';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Router } from 'react-router-dom';
import { createVersionedContextForTesting } from '@backstage/version-bridge';
import { useRouteRef } from './useRouteRef';
import { createRouteRef } from './RouteRef';
+import { createBrowserHistory } from 'history';
describe('v1 consumer', () => {
const context = createVersionedContextForTesting('routing-context');
@@ -49,4 +50,108 @@ describe('v1 consumer', () => {
}),
);
});
+
+ it('re-resolves the routeFunc when the search parameters change', () => {
+ const resolve = jest.fn(() => () => '/hello');
+ context.set({ 1: { resolve } });
+
+ const routeRef = createRouteRef({ id: 'ref1' });
+ const history = createBrowserHistory();
+ history.push('/my-page');
+
+ const { rerender } = renderHook(() => useRouteRef(routeRef), {
+ wrapper: ({ children }) => (
+
+ ),
+ });
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+
+ history.push('/my-new-page');
+ rerender();
+
+ expect(resolve).toHaveBeenCalledTimes(2);
+ });
+
+ it('does not re-resolve the routeFunc the location pathname does not change', () => {
+ const resolve = jest.fn(() => () => '/hello');
+ context.set({ 1: { resolve } });
+
+ const routeRef = createRouteRef({ id: 'ref1' });
+ const history = createBrowserHistory();
+ history.push('/my-page');
+
+ const { rerender } = renderHook(() => useRouteRef(routeRef), {
+ wrapper: ({ children }) => (
+
+ ),
+ });
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+
+ history.push('/my-page');
+ rerender();
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not re-resolve the routeFunc when the search parameter changes', () => {
+ const resolve = jest.fn(() => () => '/hello');
+ context.set({ 1: { resolve } });
+
+ const routeRef = createRouteRef({ id: 'ref1' });
+ const history = createBrowserHistory();
+ history.push('/my-page');
+
+ const { rerender } = renderHook(() => useRouteRef(routeRef), {
+ wrapper: ({ children }) => (
+
+ ),
+ });
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+
+ history.push('/my-page?foo=bar');
+ rerender();
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+ });
+
+ it('does not re-resolve the routeFunc when the hash parameter changes', () => {
+ const resolve = jest.fn(() => () => '/hello');
+ context.set({ 1: { resolve } });
+
+ const routeRef = createRouteRef({ id: 'ref1' });
+ const history = createBrowserHistory();
+ history.push('/my-page');
+
+ const { rerender } = renderHook(() => useRouteRef(routeRef), {
+ wrapper: ({ children }) => (
+
+ ),
+ });
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+
+ history.push('/my-page#foo');
+ rerender();
+
+ expect(resolve).toHaveBeenCalledTimes(1);
+ });
});
diff --git a/packages/core-plugin-api/src/routing/useRouteRef.tsx b/packages/core-plugin-api/src/routing/useRouteRef.tsx
index 563bb2035c..cf292b110f 100644
--- a/packages/core-plugin-api/src/routing/useRouteRef.tsx
+++ b/packages/core-plugin-api/src/routing/useRouteRef.tsx
@@ -85,7 +85,7 @@ export function useRouteRef(
| SubRouteRef
| ExternalRouteRef,
): RouteFunc | undefined {
- const sourceLocation = useLocation();
+ const { pathname } = useLocation();
const versionedContext = useVersionedContext<{ 1: RouteResolver }>(
'routing-context',
);
@@ -95,8 +95,8 @@ export function useRouteRef(
const resolver = versionedContext.atVersion(1);
const routeFunc = useMemo(
- () => resolver && resolver.resolve(routeRef, sourceLocation),
- [resolver, routeRef, sourceLocation],
+ () => resolver && resolver.resolve(routeRef, { pathname }),
+ [resolver, routeRef, pathname],
);
if (!versionedContext) {