How do I link to another page within a Shopify Embedded App?

Question

I am building an embedded React app for Shopify.

I am trying to perform the seemingly simple task of navigating from one page to another.

For example, I would like to display a link on index.js that takes the user to newpage.js.

I have tried using Shopify's <Link> component (see https://polaris.shopify.com/components/navigation/link#navigation ). However, when I click on the page I am presented with the following error:

Expected a valid shop query parameter

Any ideas?

Answer 1

By default the Link component from Polaris defaults to <a> tag that is not part of the react-router scope.

You need to overwrite the Link component with the react-router Link . This is done as a prop passed to the AppProvider component.

import {BrowserRouter, Link as ReactRouterLink} from 'react-router-dom';

<AppProvider linkComponent={Link}>