PolarisProvider handleClick not going through react router #306
Comments
|
The useNavigate method worked for me as well! I have a client side rendered app, Thanks! do you fancy to create a PR for this fix? :P |
|
That worked for me too. For anyone else navigating here looking for the answer, here's the top of my PolarisProvider.jsx file: import { useCallback } from "react";
import { AppProvider } from "@shopify/polaris";
import "@shopify/polaris/build/esm/styles.css";
import { getPolarisTranslations } from "../../utils/i18nUtils";
+ import {useNavigate} from "react-router-dom";
function AppBridgeLink({ url, children, external, ...rest }) {
+ const navigate = useNavigate();
+ const handleClick = useCallback(() => navigate(url), [url]);
- const handleClick = useCallback(() => window.open(url), [url]); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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:
https://admin.shopify.com/store/my-store/apps/my-app/pagenameActual click behavior:
https://<backend server host name>/pagenameI think the bug is in the PolarisProvider.jsx. The change in this commit switched to using
window.openfor the click handler for internal links, which caused the new behavior. The old App Bridge v3 version (usingnavigate()) worked fine.I believe the proper fix is to do this in PolarisProvider.jsx:
The text was updated successfully, but these errors were encountered: