diff --git a/docs/plugins/composability.md b/docs/plugins/composability.md
index a496217875..6106fa9141 100644
--- a/docs/plugins/composability.md
+++ b/docs/plugins/composability.md
@@ -248,7 +248,7 @@ might be linking to, allowing the app to decide the final target. If the
declare an `ExternalRouteRef` similar to this:
```ts
-const headerLinkRouteRef = createExternalRouteRef();
+const headerLinkRouteRef = createExternalRouteRef({ id: 'header-link' });
```
### Binding External Routes in the App
diff --git a/packages/core-api/src/app/App.test.tsx b/packages/core-api/src/app/App.test.tsx
index 8dd40d52b0..6a1e80334b 100644
--- a/packages/core-api/src/app/App.test.tsx
+++ b/packages/core-api/src/app/App.test.tsx
@@ -28,7 +28,7 @@ import { generateBoundRoutes, PrivateAppImpl } from './App';
describe('generateBoundRoutes', () => {
it('runs happy path', () => {
- const external = { myRoute: createExternalRouteRef() };
+ const external = { myRoute: createExternalRouteRef({ id: '1' }) };
const ref = createRouteRef({ path: '', title: '' });
const result = generateBoundRoutes(({ bind }) => {
bind(external, { myRoute: ref });
@@ -38,7 +38,7 @@ describe('generateBoundRoutes', () => {
});
it('throws on unknown keys', () => {
- const external = { myRoute: createExternalRouteRef() };
+ const external = { myRoute: createExternalRouteRef({ id: '2' }) };
const ref = createRouteRef({ path: '', title: '' });
expect(() =>
generateBoundRoutes(({ bind }) => {
@@ -51,7 +51,7 @@ describe('generateBoundRoutes', () => {
describe('Integration Test', () => {
const plugin1RouteRef = createRouteRef({ path: '/blah1', title: '' });
const plugin2RouteRef = createRouteRef({ path: '/blah2', title: '' });
- const externalRouteRef = createExternalRouteRef();
+ const externalRouteRef = createExternalRouteRef({ id: '3' });
const plugin1 = createPlugin({
id: 'blob',
@@ -77,7 +77,7 @@ describe('Integration Test', () => {
Promise.resolve((_: PropsWithChildren<{ path?: string }>) => {
// eslint-disable-next-line react-hooks/rules-of-hooks
const routeRefFunction = useRouteRef(externalRouteRef);
- return
Our Route Is: {routeRefFunction({})}
;
+ return Our Route Is: {routeRefFunction()}
;
}),
mountPoint: plugin1RouteRef,
}),
diff --git a/packages/core-api/src/routing/RouteRef.ts b/packages/core-api/src/routing/RouteRef.ts
index 0a3df49b58..5ae85ab553 100644
--- a/packages/core-api/src/routing/RouteRef.ts
+++ b/packages/core-api/src/routing/RouteRef.ts
@@ -65,13 +65,22 @@ export function createRouteRef<
}
export class ExternalRouteRef {
- private constructor() {}
-
- toString() {
- return `externalRouteRef{}`;
+ private constructor(id: string) {
+ this.toString = () => `externalRouteRef{${id}}`;
}
}
-export function createExternalRouteRef(): ExternalRouteRef {
- return new ((ExternalRouteRef as unknown) as { new (): ExternalRouteRef })();
+export type ExternalRouteRefOptions = {
+ /**
+ * An identifier for this route, used to identify it in error messages
+ */
+ id: string;
+};
+
+export function createExternalRouteRef(
+ options: ExternalRouteRefOptions,
+): ExternalRouteRef {
+ return new ((ExternalRouteRef as unknown) as {
+ new (id: string): ExternalRouteRef;
+ })(options.id);
}
diff --git a/packages/core-api/src/routing/hooks.test.tsx b/packages/core-api/src/routing/hooks.test.tsx
index 84a8314807..462b44c3bd 100644
--- a/packages/core-api/src/routing/hooks.test.tsx
+++ b/packages/core-api/src/routing/hooks.test.tsx
@@ -59,9 +59,9 @@ const ref2 = createRouteRef(mockConfig({ path: '/wat2' }));
const ref3 = createRouteRef(mockConfig({ path: '/wat3' }));
const ref4 = createRouteRef(mockConfig({ path: '/wat4' }));
const ref5 = createRouteRef(mockConfig({ path: '/wat5' }));
-const eRefA = createExternalRouteRef();
-const eRefB = createExternalRouteRef();
-const eRefC = createExternalRouteRef();
+const eRefA = createExternalRouteRef({ id: '1' });
+const eRefB = createExternalRouteRef({ id: '2' });
+const eRefC = createExternalRouteRef({ id: '3' });
const MockRouteSource = (props: {
path?: string;
diff --git a/packages/core-api/src/routing/hooks.tsx b/packages/core-api/src/routing/hooks.tsx
index 3a18d8b0af..c478027ae2 100644
--- a/packages/core-api/src/routing/hooks.tsx
+++ b/packages/core-api/src/routing/hooks.tsx
@@ -111,7 +111,7 @@ class RouteResolver {
const RoutingContext = createContext(undefined);
-export function useRouteRef(
+export function useRouteRef(
routeRef: RouteRef | ExternalRouteRef,
): RouteFunc {
const sourceLocation = useLocation();
diff --git a/packages/core-api/src/routing/index.ts b/packages/core-api/src/routing/index.ts
index af71e0c3e9..ad88f8ff02 100644
--- a/packages/core-api/src/routing/index.ts
+++ b/packages/core-api/src/routing/index.ts
@@ -21,6 +21,6 @@ export type {
MutableRouteRef,
} from './types';
export { FlatRoutes } from './FlatRoutes';
-export { createRouteRef } from './RouteRef';
+export { createRouteRef, createExternalRouteRef } from './RouteRef';
export type { RouteRefConfig } from './RouteRef';
export { useRouteRef } from './hooks';