fix(react): Conditionally render deprecation warning

.changeset/plenty-drinks-wonder.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(react): Conditionally render deprecation warning if Link component's `to` prop is used without using `as` prop

packages/react/src/primitives/Link/Link.tsx

@@ -7,19 +7,19 @@ import { View } from '../View';
 import { useDeprecationWarning } from '../../hooks/useDeprecationWarning';
 
 const LinkPrimitive: Primitive<LinkProps, 'a'> = (
-  { as = 'a', children, className, isExternal, to, ...rest },
+  { as, children, className, isExternal, to, ...rest },
   ref
 ) => {
   useDeprecationWarning({
-    shouldWarn: to != null,
+    shouldWarn: to != null && !as,
     message:
       "The Link component's to prop will soon be deprecated. " +
       'Please see the Amplify UI documentation for using the Link component with routing libraries: ' +
       'https://ui.docs.amplify.aws/react/components/link#routing-libraries',
   });
   return (
     <View
-      as={as}
+      as={as ?? 'a'}
       className={classNames(ComponentClassNames.Link, className)}
       ref={ref}
       rel={isExternal ? 'noopener noreferrer' : undefined}

packages/react/src/primitives/Link/__tests__/Link.test.tsx

@@ -116,10 +116,17 @@ describe('Link: ', () => {
     expect(screen.getByText(/you are on the about page/i)).toBeInTheDocument();
   });
 
-  it('should call console.warn if "to" prop is used', async () => {
+  it('should call console.warn if "to" prop is used without "as" prop', async () => {
     const spyWarn = jest.spyOn(console, 'warn');
     render(<Link to="/test">Test</Link>);
     expect(spyWarn).toHaveBeenCalled();
     spyWarn.mockRestore();
   });
+
+  it('should not call console.warn if "to" prop is used with "as" prop', async () => {
+    const spyWarn = jest.spyOn(console, 'warn');
+    render(<SampleRoutingApp />);
+    expect(spyWarn).not.toHaveBeenCalled();
+    spyWarn.mockRestore();
+  });
 });