Support basePath for relative href prop (#248)

* Support basePath for href prop

* no basePath for external links

* rename external to absolute

* match links with no protocol

* linting

* add changeset

Author: upreeti

.changeset/happy-fireants-visit.md

@@ -0,0 +1,5 @@
+---
+"react-resource-router": patch
+---
+
+Support basePath for relative href prop

package-lock.json

@@ -72,8 +72,12 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
               )) ||
             ''
           : to;
+    const IS_ABSOLUTE_LINK_REGEX = /^((?:(http|https):\/\/)|\/\/)/;
     const staticBasePath =
-      href == null && typeof to === 'string' ? routeAttributes.basePath : '';
+      (href != null && !IS_ABSOLUTE_LINK_REGEX.test(href)) ||
+      typeof to === 'string'
+        ? routeAttributes.basePath
+        : '';
 
     const triggerPrefetch = useCallback(() => {
       // ignore if async route not ready yet

src/ui/link/index.tsx

@@ -91,6 +91,48 @@ describe('<Link />', () => {
     );
   });
 
+  it('should push history with correct link for relative href when given basePath', () => {
+    renderInRouter(
+      'my link',
+      {
+        href: '/route/1?foo=bar',
+      },
+      '/base'
+    );
+    expect(screen.getByRole('link', { name: 'my link' })).toHaveAttribute(
+      'href',
+      '/base/route/1?foo=bar'
+    );
+  });
+
+  it('should not add basePath for absolute links', () => {
+    renderInRouter(
+      'my link',
+      {
+        href: 'https://www.atlassian.com/',
+      },
+      '/base'
+    );
+    expect(screen.getByRole('link', { name: 'my link' })).toHaveAttribute(
+      'href',
+      'https://www.atlassian.com/'
+    );
+  });
+
+  it('should not add basePath for absolute links with no protocol specified', () => {
+    renderInRouter(
+      'my link',
+      {
+        href: '//www.atlassian.com/',
+      },
+      '/base'
+    );
+    expect(screen.getByRole('link', { name: 'my link' })).toHaveAttribute(
+      'href',
+      '//www.atlassian.com/'
+    );
+  });
+
   it('should pass props to the child element', () => {
     renderInRouter('my link', {
       ...defaultProps,