Building a Shopify App - How to Load Different Pages?

Question

I am using the Shopify CLI NodeJS tutorial to get started.

https://shopify.github.io/shopify-app-cli/app/rails/commands/#generate

I've been easily adding Polaris Components but I'm having trouble figuring out how to get my app to go from loading index.js to loading another page.

I am an absolute noob to this, all I want to do is basically add a route and load it.

My Pages Folder contains

• _app.js
• index.js
• customer_import.js

How can i create a link in my apps navigation that will load the customer_import.js content where the current index.js content goes.

_APP.js

import fetch from "node-fetch";
import ApolloClient from "apollo-boost";
import { ApolloProvider } from "react-apollo";
import ClientRouter from '../components/ClientRouter';
import App from "next/app";
import {AppProvider, Avatar, Icon, VisuallyHidden, ActionList, Frame, TopBar, Navigation} from '@shopify/polaris';
import { Provider } from "@shopify/app-bridge-react";
import "@shopify/polaris/dist/styles.css";
import translations from "@shopify/polaris/locales/en.json";
import {ArrowLeftMinor, ConversationMinor, HomeMajor, OrdersMajor, QuestionMarkMajor} from '@shopify/polaris-icons';

const client = new ApolloClient({
  fetch: fetch,
  fetchOptions: {
    credentials: "include",
  },
});


class MyApp extends App {
  render() {
    const { Component, pageProps, shopOrigin } = this.props;

    const theme = {
      colors: {
        surface: '#111213',
        onSurface: '#111213',
        interactive: '#2e72d2',
        secondary: '#111213',
        primary: '#000',
        critical: '#d82c0d',
        warning: '#ffc453',
        highlight: '#5bcdda',
        success: '#008060',
        decorative: '#ffc96b',
      },
      logo: {
        width: 250,
        topBarSource:
        'https://speedsociety-cdn.s3-us-west-1.amazonaws.com/dist/images/branding/ss-logo-new-blk.svg',
        url: 'http://speedsociety.com',
        accessibilityLabel: 'Speed Society',
      },
    };


    const navigationMarkup = (
      <Navigation location="/">
      <Navigation.Section
      items={[
        {
          label: 'Back to Shopify',
          icon: ArrowLeftMinor,
        },
      ]}
      />
      <Navigation.Section
      separator
      title="Speed Society"
      items={[
        {
          label: 'Dashboard',
          icon: HomeMajor,
        },
        {
          label: 'Speed Society Customers',
          icon: OrdersMajor,
        },
      ]}
      action={{
        icon: ConversationMinor,
        accessibilityLabel: 'Contact support',
      }}
      />
      </Navigation>
    );

    const userMenuMarkup = (
      <TopBar.UserMenu
      actions={[
        {
          items: [{content: 'Back to Shopify', icon: ArrowLeftMinor}],
        },
        {
          items: [{content: 'Community forums'}],
        },
      ]}
      name="Admin"
      detail="Speed Society"
      initials="Nick K"
      />
    );


    const secondaryMenuMarkup = (
      <TopBar.Menu
      activatorContent={
        <span>
        <Icon source={QuestionMarkMajor} />
        <VisuallyHidden>Secondary menu</VisuallyHidden>
        </span>
      }
      actions={[
        {
          items: [{content: 'Community forums'}],
        },
      ]}
      />
    );

    const topBarMarkup = (
      <TopBar
      showNavigationToggle
      userMenu={userMenuMarkup}
      secondaryMenu={secondaryMenuMarkup}
      />
    );


    return (
      <div style={{height: '250px'}}>
      <AppProvider
      theme={theme}
      features={{newDesignLanguage: true}}
      i18n={translations}>
      <Provider
      config={{
        apiKey: API_KEY,
        shopOrigin: shopOrigin,
        forceRedirect: true,
      }}
      >
      <ApolloProvider client={client}>
      <Frame topBar={topBarMarkup} navigation={navigationMarkup}>
      <ClientRouter />
      <Component {...pageProps} />
      </Frame>
      </ApolloProvider>
      </Provider>
      </AppProvider>
      </div>
    );
  }
}

MyApp.getInitialProps = async ({ ctx }) => {
  return {
    shopOrigin: ctx.query.shop,
  };
};

export default MyApp;

index.js

import { Heading, Card, Layout, Page, List, TextContainer, Frame } from '@shopify/polaris';

const Index = () => (
  <Page title="Speed Society Data Migration App">
  <TextContainer>
    <hr/>
  </TextContainer>
  <Layout>
  <Layout.Section oneHalf>
  <Card
  title="Customer Import Status"
  secondaryFooterActions={[{content: 'View Imported Customers'}]}
  primaryFooterAction={{content: 'Import Customers'}}
  >
  <Card.Section title="Progress">
  </Card.Section>
  </Card>
  </Layout.Section>
  <Layout.Section oneHalf>
  <Card
  title="Entries Import Status"
  secondaryFooterActions={[{content: 'View Imported Entries'}]}
  primaryFooterAction={{content: 'Import Entries'}}
  >
  <Card.Section title="Progress">
  </Card.Section>
  </Card>
  </Layout.Section>
  </Layout>
  </Page>
);

export default Index;

customer_import.js

import { Card, Layout, Page } from '@shopify/polaris';

const CustomerImport = () => (
  <Page>
    <Layout>
      <Layout.Section oneHalf>
        <Card>
          <div>Put content here</div>
          <a href="https://polaris.shopify.com/components/structure/layout">See Polaris docs</a>
        </Card>
      </Layout.Section>
      <Layout.Section oneHalf>
        <Card>
          Put content here
        </Card>
      </Layout.Section>
    </Layout>
  </Page >
  );
  export default CustomerImport;

Answer 1

Use Next-Router component to redirect between pages. in your scenario

import { useRouter } from 'next/router'
//other stuff
const route = useRouter();
routeMe = () => {
router.push('/customer_import')
Render{
return(
<Card
title="Customer Import Status"
secondaryFooterActions={[{content: 'View Imported Customers'}]}
primaryFooterAction={{content: 'Import Customers', onClick: {this.routeMe}}}
>)}