diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
index b0a6b46bf5..eb783ae02b 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.test.tsx
@@ -174,4 +174,26 @@ describe('', () => {
'/catalog/test/component/software',
);
});
+
+ it('renders link by encoding name as URI component', async () => {
+ const entityName = {
+ kind: 'Component',
+ namespace: 'test',
+ name: 'softw#are',
+ };
+ await renderInTestApp(
+
+ Custom Children
+ ,
+ {
+ mountedRoutes: {
+ '/catalog/:namespace/:kind/:name/*': entityRouteRef,
+ },
+ },
+ );
+ expect(screen.getByText('Custom Children')).toHaveAttribute(
+ 'href',
+ '/catalog/test/component/softw%23are',
+ );
+ });
});
diff --git a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
index 06a632232e..82a98ca417 100644
--- a/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
+++ b/plugins/catalog-react/src/components/EntityRefLink/EntityRefLink.tsx
@@ -71,7 +71,7 @@ export const EntityRefLink = forwardRef(
kind = kind.toLocaleLowerCase('en-US');
namespace = namespace?.toLocaleLowerCase('en-US') ?? DEFAULT_NAMESPACE;
- const routeParams = { kind, namespace, name };
+ const routeParams = { kind, namespace, name: encodeURIComponent(name) };
const formattedEntityRefTitle = humanizeEntityRef(
{ kind, namespace, name },
{ defaultKind },