构建 Shopify 应用 - 如何加载不同的页面？ _APP.jsindex.jscustomer_import.js

问题描述

我正在使用 Shopify CLI NodeJS 教程开始使用。

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

我一直很容易添加 Polaris 组件，但我无法弄清楚如何让我的应用从加载 index.js 到加载另一个页面。

我绝对是个菜鸟，我想做的基本上就是添加一个路由并加载它。

我的页面文件夹包含

• _app.js@H_404_12@
• index.js@H_404_12@
• customer_import.js@H_404_12@

如何在我的应用程序导航中创建一个链接，以加载当前 index.js 内容所在的 customer_import.js 内容。

_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,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;

解决方法

使用 Next-Router 组件在页面之间重定向。在你的场景中

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