0

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?

Brandon
  • 155
  • 10

1 Answers1

2

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}>

More on the matter can be seen here: https://polaris.shopify.com/components/structure/app-provider#section-using-linkcomponent

drip
  • 12,378
  • 2
  • 30
  • 49
  • Thanks for your help, @drip. I'm still having some trouble with the code. I've opened a new question to build on this one (https://stackoverflow.com/questions/66996055/how-do-i-use-routing-to-link-between-pages-in-shopify-embedded-app). – Brandon Apr 08 '21 at 01:14