Add support for router base path

packages/@react-aria/link/src/useLink.ts

@@ -12,7 +12,7 @@
 
 import {AriaLinkProps} from '@react-types/link';
 import {DOMAttributes, FocusableElement} from '@react-types/shared';
-import {filterDOMProps, mergeProps, shouldClientNavigate, useRouter} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, shouldClientNavigate, useRouter, withBasePath} from '@react-aria/utils';
 import React, {RefObject} from 'react';
 import {useFocusable} from '@react-aria/focus';
 import {usePress} from '@react-aria/interactions';
@@ -66,7 +66,7 @@ export function useLink(props: AriaLinkOptions, ref: RefObject<FocusableElement>
 
   return {
     isPressed, // Used to indicate press state for visual
-    linkProps: mergeProps(domProps, {
+    linkProps: mergeProps(withBasePath(router, domProps), {
       ...interactionHandlers,
       ...linkProps,
       'aria-disabled': isDisabled || undefined,

packages/@react-aria/menu/src/useMenuItem.ts

@@ -11,7 +11,7 @@
  */
 
 import {DOMAttributes, FocusableElement, Key, PressEvent} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useEffectEvent, useLayoutEffect, useRouter, useSlotId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useEffectEvent, useLayoutEffect, useRouter, useSlotId, withBasePath} from '@react-aria/utils';
 import {focusSafely} from '@react-aria/focus';
 import {getItemCount} from '@react-stately/collections';
 import {isFocusVisible, useHover, useKeyboard, usePress} from '@react-aria/interactions';
@@ -283,7 +283,7 @@ export function useMenuItem<T>(props: AriaMenuItemProps, state: TreeState<T>, re
     }
   });
 
-  let domProps = filterDOMProps(item.props, {isLink: !!item?.props?.href});
+  let domProps = filterDOMProps(withBasePath(router, item.props), {isLink: !!item?.props?.href});
   delete domProps.id;
   return {
     menuItemProps: {

packages/@react-aria/utils/src/index.ts

@@ -17,7 +17,7 @@ export {mergeRefs} from './mergeRefs';
 export {filterDOMProps} from './filterDOMProps';
 export {focusWithoutScrolling} from './focusWithoutScrolling';
 export {getOffset} from './getOffset';
-export {openLink, getSyntheticLinkProps, RouterProvider, shouldClientNavigate, useRouter} from './openLink';
+export {openLink, getSyntheticLinkProps, RouterProvider, shouldClientNavigate, useRouter, withBasePath} from './openLink';
 export {runAfterTransition} from './runAfterTransition';
 export {useDrag1D} from './useDrag1D';
 export {useGlobalListeners} from './useGlobalListeners';

packages/@react-aria/utils/src/openLink.tsx

@@ -16,16 +16,19 @@ import {LinkDOMProps} from '@react-types/shared';
 import React, {createContext, ReactNode, useContext, useMemo} from 'react';
 
 interface Router {
+  basePath?: string,
   isNative: boolean,
   open: (target: Element, modifiers: Modifiers) => void
 }
 
 const RouterContext = createContext<Router>({
+  basePath: undefined,
   isNative: true,
   open: openSyntheticLink
 });
 
 interface RouterProviderProps {
+  basePath?: string,
   navigate: (path: string) => void,
   children: ReactNode
 }
@@ -35,20 +38,22 @@ interface RouterProviderProps {
  * and provides it to all nested React Aria links to enable client side navigation.
  */
 export function RouterProvider(props: RouterProviderProps) {
-  let {children, navigate} = props;
+  let {basePath, children, navigate} = props;
 
   let ctx = useMemo(() => ({
+    basePath,
     isNative: false,
     open: (target: Element, modifiers: Modifiers) => {
       getSyntheticLink(target, link => {
         if (shouldClientNavigate(link, modifiers)) {
-          navigate(link.pathname + link.search + link.hash);
+          const pathname = basePath ? link.pathname.replace(basePath, '') : link.pathname;
+          navigate(pathname + link.search + link.hash);
         } else {
           openLink(link, modifiers);
         }
       });
     }
-  }), [navigate]);
+  }), [basePath, navigate]);
 
   return (
     <RouterContext.Provider value={ctx}>
@@ -152,3 +157,8 @@ export function getSyntheticLinkProps(props: LinkDOMProps) {
     'data-referrer-policy': props.referrerPolicy
   };
 }
+
+export function withBasePath<T>(router: Router, props: T): T {
+  const {href} = (props as {href?: string});
+  return router.basePath && href ? {...props, href: router.basePath + href} : props;
+}

packages/react-aria-components/test/Link.test.js

@@ -139,6 +139,16 @@ describe('Link', () => {
     let {getByRole} = render(<RouterProvider navigate={navigate}><Link href="/foo">Test</Link></RouterProvider>);
     let link = getByRole('link');
     await user.click(link);
+    expect(link).toHaveAttribute('href', '/foo');
+    expect(navigate).toHaveBeenCalledWith('/foo');
+  });
+
+  it('should support router basePath', async () => {
+    let navigate = jest.fn();
+    let {getByRole} = render(<RouterProvider basePath="/bar" navigate={navigate}><Link href="/foo">Test</Link></RouterProvider>);
+    let link = getByRole('link');
+    await user.click(link);
+    expect(link).toHaveAttribute('href', '/bar/foo');
     expect(navigate).toHaveBeenCalledWith('/foo');
   });
 });