Shopify embedded app - Nextjs router - host must be provided

Shopify embedded app - Nextjs router - host must be provided

test6A
Shopify Partner
23 0 14

I'm creating an embedded app with Nextjs. I need to use <Link> component or router.push to redirect my app to another page. I follow this code example: https://gist.github.com/shafiimam/ab6c80c6e56ea859744bbc36dffaeee9 

 

RoutePropagator.js

 

import React, {useEffect, useContext} from 'react';
import Router, { useRouter } from "next/router";
import { Context as AppBridgeContext } from "@shopify/app-bridge-react";
import { Redirect } from "@shopify/app-bridge/actions";
import { RoutePropagator as ShopifyRoutePropagator } from "@shopify/app-bridge-react";

const RoutePropagator = () => {
  const router = useRouter();
  const { asPath } = router;
  const appBridge = React.useContext(AppBridgeContext);

  // Subscribe to appBridge changes - captures appBridge urls
  // and sends them to Next.js router. Use useEffect hook to
  // load once when component mounted
  useEffect(() => {
    appBridge.subscribe(Redirect.Action.APP, ({ path }) => {
      Router.push(path);
    });
  }, []);

  return appBridge && asPath ? (
    <ShopifyRoutePropagator location={asPath} app={appBridge} />
  ) : null;
}

export default RoutePropagator;

 

 

index.js

 

 

import React from 'react';
import { Button } from '@shopify/polaris';
import { useRouter } from 'next/route';

const App = () => {
    const router = useRouter();
    const handleClick = () => {
        router.push('/page1');
    }
    return <Button onClick={handleClick}>Click me</Button>;
};

export default App;

 

 
page1.js

 

import React from 'react';
import { Button } from '@shopify/polaris';

const Page = () => {
  return  <Button>Click me</Button>;
};

export default Page;

 


But it doesn't work. It keeps redirect to /auth.
I tried router.push('/page1?shop=' + shop) and it said AppBridgeError: APP::ERROR::INVALID_CONFIG: host must be provided.

 

But if page1.js is like this:

 

import React from 'react';

const Page = () => {
  return  <p>Page 1</p>;
};

export default Page;

 

It works fine. 

 

I'm so confused. If I use Shopify Polaris inside page1.js, not work. If no Polaris import, it works.

I wonder if there is any solution or example for this router?

Reply 1 (1)

Yamathon
Shopify Partner
9 0 1

Did you fix the issue?

Yamathon - Running gear engineered to unlock the High.