Pages are reloaded instead of routed in shopify next js app

AlexisS
Shopify Partner
5 0 1

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

0 Likes

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

 

 

 

 

- Looking to Automate Support on FB Messenger? Install our Messenger Marketing & Support App
- Want to embed Instagram Stories on your store? Install our Instagram Stories & Highlights App
- Have more questions? Feel free to email me.
- My reply helped? Click Like to show me some love!
0 Likes
Henry_Tao
Shopify Staff
Shopify Staff
79 25 11

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

 

0 Likes