Merge pull request #5006 from SDA-SE/feat/userouteparams

Introduce `useRouteRefParams` to `core-api` to retrieve typed route params

packages/core-api/src/routing/hooks.test.tsx

@@ -14,35 +14,35 @@
  * limitations under the License.
  */
 
+import { render } from '@testing-library/react';
+import { renderHook } from '@testing-library/react-hooks';
 import React, {
+  Context,
   PropsWithChildren,
   ReactElement,
   useContext,
-  Context,
 } from 'react';
-import { MemoryRouter, Routes } from 'react-router-dom';
-import { render } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
-import { VersionedValue } from '../lib/versionedValues';
-import { getGlobalSingleton } from '../lib/globalObject';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { createRoutableExtension } from '../extensions';
 import {
   childDiscoverer,
   routeElementDiscoverer,
   traverseElementTree,
 } from '../extensions/traversal';
+import { getGlobalSingleton } from '../lib/globalObject';
+import { VersionedValue } from '../lib/versionedValues';
 import { createPlugin } from '../plugin';
 import {
-  routePathCollector,
-  routeParentCollector,
   routeObjectCollector,
+  routeParentCollector,
+  routePathCollector,
 } from './collectors';
-import { validateRoutes } from './validation';
-import { useRouteRef, RoutingProvider } from './hooks';
+import { createExternalRouteRef } from './ExternalRouteRef';
+import { RoutingProvider, useRouteRef, useRouteRefParams } from './hooks';
 import { createRouteRef, RouteRefConfig } from './RouteRef';
 import { RouteResolver } from './RouteResolver';
-import { createExternalRouteRef } from './ExternalRouteRef';
-import { AnyRouteRef, RouteFunc, RouteRef, ExternalRouteRef } from './types';
+import { AnyRouteRef, ExternalRouteRef, RouteFunc, RouteRef } from './types';
+import { validateRoutes } from './validation';
 
 const mockConfig = (extra?: Partial<RouteRefConfig<{}>>) => ({
   path: '/unused',
@@ -370,3 +370,36 @@ describe('v1 consumer', () => {
     expect(renderedHook.result.current?.({ x: 'my-x' })).toBe('/bar/my-x');
   });
 });
+
+describe('useRouteRefParams', () => {
+  it('should provide types params', () => {
+    const routeRef = createRouteRef({
+      id: 'ref1',
+      params: ['a', 'b'],
+    });
+
+    const Page = () => {
+      const params: { a: string; b: string } = useRouteRefParams(routeRef);
+
+      return (
+        <div>
+          <span>{params.a}</span>
+          <span>{params.b}</span>
+        </div>
+      );
+    };
+
+    const { getByText } = render(
+      <MemoryRouter initialEntries={['/foo/bar']}>
+        <Routes>
+          <Route path="/:a/:b">
+            <Page />
+          </Route>
+        </Routes>
+      </MemoryRouter>,
+    );
+
+    expect(getByText('foo')).toBeInTheDocument();
+    expect(getByText('bar')).toBeInTheDocument();
+  });
+});

packages/core-api/src/routing/hooks.tsx

@@ -21,7 +21,7 @@ import React, {
   useMemo,
   Context,
 } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useParams } from 'react-router-dom';
 import {
   BackstageRouteObject,
   RouteRef,
@@ -111,3 +111,9 @@ export const RoutingProvider = ({
     </RoutingContext.Provider>
   );
 };
+
+export function useRouteRefParams<Params extends AnyParams>(
+  _routeRef: RouteRef<Params> | SubRouteRef<Params>,
+): Params {
+  return useParams() as Params;
+}

packages/core-api/src/routing/index.ts

@@ -14,17 +14,17 @@
  * limitations under the License.
  */
 
+export { createExternalRouteRef } from './ExternalRouteRef';
+export { FlatRoutes } from './FlatRoutes';
+export { useRouteRef, useRouteRefParams } from './hooks';
+export { createRouteRef } from './RouteRef';
+export type { RouteRefConfig } from './RouteRef';
+export { createSubRouteRef } from './SubRouteRef';
 export type {
-  RouteRef,
-  SubRouteRef,
   AbsoluteRouteRef,
   ConcreteRoute,
-  MutableRouteRef,
   ExternalRouteRef,
+  MutableRouteRef,
+  RouteRef,
+  SubRouteRef,
 } from './types';
-export { FlatRoutes } from './FlatRoutes';
-export { createRouteRef } from './RouteRef';
-export { createSubRouteRef } from './SubRouteRef';
-export { createExternalRouteRef } from './ExternalRouteRef';
-export type { RouteRefConfig } from './RouteRef';
-export { useRouteRef } from './hooks';