Supported basePath for to prop when passed as string. Resolving acces… (

#227)

* Supported basePath for to prop when passed as string. Resolving accessibility issues for new tabs/window interactions.

* Updated href to reference staticBasePath

src/ui/link/index.tsx

@@ -72,6 +72,8 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
             )) ||
           ''
         : to;
+    const staticBasePath =
+      href == null && typeof to === 'string' ? routeAttributes.basePath : '';
 
     const triggerPrefetch = useCallback(() => {
       // ignore if async route not ready yet
@@ -145,7 +147,7 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
       validLinkType,
       {
         ...rest,
-        href: linkDestination,
+        href: `${staticBasePath}${linkDestination}`,
         target,
         onClick: handleLinkPress,
         onKeyDown: handleLinkPress,

src/ui/link/test.tsx

@@ -67,6 +67,30 @@ describe('<Link />', () => {
     expect(linkElement).toHaveAttribute('href', newPath);
   });
 
+  it('should support the `to` prop with basePath', () => {
+    renderInRouter('my link', { to: '/my-page/1?foo=bar' }, '/base');
+    const linkElement = screen.getByRole('link', { name: 'my link' });
+    expect(linkElement).toHaveAttribute('href', `/base/my-page/1?foo=bar`);
+  });
+
+  it('should push history with correct link given basePath', async () => {
+    const user = userEvent.setup();
+    renderInRouter(
+      'my link',
+      {
+        to: '/my-page/1?foo=bar',
+      },
+      '/base'
+    );
+
+    await user.click(screen.getByRole('link', { name: 'my link' }));
+
+    expect(HistoryMock.push).toHaveBeenCalledWith(
+      '/base/my-page/1?foo=bar',
+      undefined
+    );
+  });
+
   it('should pass props to the child element', () => {
     renderInRouter('my link', {
       ...defaultProps,