App
component
Sets up an <a /> HTML element that works when rendered behind an app proxy.
Supports any properties accepted by the <a /> HTML element.
Was this section helpful?
Link to a different route
/app/routes/**\/*.ts
import {authenticate} from '~/shopify.server';
import {AppProxyProvider, AppProxyLink} from '@shopify/shopify-app-remix/react';
export async function loader({ request }) {
await authenticate.public.appProxy(request);
return json({ appUrl: process.env.SHOPIFY_APP_URL });
}
export default function App() {
const { appUrl } = useLoaderData();
return (
<AppProxyProvider appUrl={appUrl}>
<AppProxyLink href="/other-proxy-route">Link to another route</AppProxyLink>
</AppProxyProvider>
);
}
