CODEWITHSUNDEEP
reactjsshopifyshopify-app
Brandon
Brandon

Reputation: 165

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

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?

Upvotes: 1

Views: 1848

Answers (1)

drip
drip

Reputation: 12943

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

Upvotes: 2

Related Questions