Pages are reloaded instead of routed in shopify next js app

[AlexisS]

Hi there,

I followed Shopify's guide, until the end of 4th step, to develop a Next JS app and I've setup two pages (embedded app navigation), Home and Page1. Now, when I click to open both pages, the app is doing a reload instead of routing...

You can see here the flickering issue - https://youtu.be/45RvYgxC7C0

Any help on this would be very appreciated.

Thanks

[mayurc137]

If you have created the tabs from the Shopify Partner dashboard by adding the navigation in the embedded app section, the routing won't work and Shopify will reload the entire site again. 

Solution: Create the tabs in your app instead and use next/router to redirect to specific pages. 

import {useCallback, useEffect, useState} from "react";
import {Tabs} from "@shopify/polaris";
import {useRouter} from "next/router";
import {Loading} from "@shopify/app-bridge/actions";
import findIndex from 'lodash/findIndex';

const tabsList = [
    {
        id: 'dashboard',
        content: 'Dashboard',
        accessibilityLabel: 'Dashboard',
        panelID: 'dashboard',
        route:'/'
    },
    {
        id: 'page1',
        content: 'Page 1',
        panelID: 'page1',
        route:'/page1'
    }
];


const _Navigation = ({loading}) =>{
    const router = useRouter();
    let [selectedIndex, setSelected] = useState(0);

    useEffect(() => {

        if(findIndex(tabsList, {'route': router.pathname})){
            setSelected(findIndex(tabsList, {'route': router.pathname}));
        }

    }, [router]);
    const handleTabChange = useCallback(
        async (selectedTabIndex) => {
            //console.log('Tab Changed ->',selectedTabIndex);
            //console.debug('Selection Changed');
            setSelected(selectedTabIndex);
            loading.dispatch(Loading.Action.START);
            await router.push(`${tabsList[selectedTabIndex].route}`, `${tabsList[selectedTabIndex].route}`);
            loading.dispatch(Loading.Action.STOP);
        },
        [],
    );

    return (
        <Tabs tabs={tabsList} selected={selectedIndex} onSelect={handleTabChange} />
    );
};

export default _Navigation;

Your _app.js return should look something like this -> 

import App from 'next/app'
import {AppProvider} from '@shopify/polaris'
import Cookies from "js-cookie"
import '@shopify/polaris/styles.css'
import translations from '@shopify/polaris/locales/en.json'
import React from "react";
import './main.css'

const shopOrigin = Cookies.get("shopOrigin")

const MyApp = ({Component, pageProps}) => {
    const embeddedAppConfig = { apiKey: process.env.NEXT_PUBLIC_SHOPIFY_API_KEY, shopOrigin: shopOrigin , forceRedirect: true }
    return (
        <React.Fragment>
                <AppProvider config={embeddedAppConfig} i18n={}>
                        <_Navigation/>
                        <Component {...pageProps} />
                </AppProvider>
        </React.Fragment>
    )

}

MyApp.getInitialProps = async (appContext) => {
    // calls page's `getInitialProps` and fills `appProps.pageProps`
    const appProps = await App.getInitialProps(appContext)
    return { ...appProps }
}

export default MyApp

[Henry_Tao]

Hi @mayurc137 and @AlexisS 

If you are looking for handling route yourself, you can subscribe to Redirect App action. Then, the host won't force iframe to reload the page. See https://shopify.dev/tools/app-bridge/actions/navigation/redirect#subscribe-to-all-redirect-actions 

app.subscribe(Redirect.ActionType.APP, (payload: Redirect.AppPayload) => {
  // Do something with the redirect
  console.log(`Navigated to ${payload.path}`);
});