Choose a version:

AppProxyLink

Sets up an <a /> HTML element that works when rendered behind an app proxy.

Supports any properties accepted by the <a /> HTML element.

Examples

/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 (

<AppProxyLink href="/other-proxy-route">Link to another route</AppProxyLink>

</AppProxyProvider>

);

}

Examples

Description

Use an `AppProxyLink` within an `AppProxyProvider` to link to a different proxied 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>
  );
}

Anchor to RelatedRelated

Authenticating app proxy requests.authenticate.public.appProxy

Enable JavaScript in pages loaded through app proxies.AppProxyProvider

Was this page helpful?