Shopify embedded app - Nextjs router - host must be provided

Shopify Apps
1

I’m creating an embedded app with Nextjs. I need to use 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 ? (
    

index.js

```javascript
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 ;
};

export default App;

page1.js

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

const Page = () => {
  return  ;
};

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  

Page 1

;
};

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?

2

Did you fix the issue?