diff --git a/src/ui/link/index.tsx b/src/ui/link/index.tsx index 25525c5..6333d20 100644 --- a/src/ui/link/index.tsx +++ b/src/ui/link/index.tsx @@ -72,6 +72,8 @@ const Link = forwardRef( )) || '' : 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( validLinkType, { ...rest, - href: linkDestination, + href: `${staticBasePath}${linkDestination}`, target, onClick: handleLinkPress, onKeyDown: handleLinkPress, diff --git a/src/ui/link/test.tsx b/src/ui/link/test.tsx index e47a982..4bb9486 100644 --- a/src/ui/link/test.tsx +++ b/src/ui/link/test.tsx @@ -67,6 +67,30 @@ describe('', () => { 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,