PolarisProvider handleClick not going through react router

[key88sf]

Hi - I'm using the frontend react template as part of a Ruby/Rails app created with the Shopify App Template for Ruby (https://github.com/Shopify/shopify-app-template-ruby).

Problem:
All internal links which are added via Polaris components end up opening in a new tab, and do not use the proper shopify admin/app URL. Instead they open a URL with the backend server host name.

Example:

<Link url="/pagename">Click Me</Link>

Expected click behavior:

• Same browser window
• URL should be https://admin.shopify.com/store/my-store/apps/my-app/pagename

Actual click behavior:

• New tab opened
• URL is https://<backend server host name>/pagename

I think the bug is in the PolarisProvider.jsx. The change in this commit switched to using window.open for the click handler for internal links, which caused the new behavior. The old App Bridge v3 version (using navigate()) worked fine.

I believe the proper fix is to do this in PolarisProvider.jsx:

import {useNavigate} from "react-router-dom";
...
const navigate = useNavigate();
const handleClick = useCallback(() => navigate(url), [url]);