Les pages sont rechargées au lieu d'être acheminées dans l'application shopify next js

Question

Les pages sont rechargées au lieu d'être acheminées dans l'application shopify next js

Demandé el 18 de Août, 2020: Quand la question a-t-elle été
1242 affichage: Nombre de visites la question a
2 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai suivi Guide de Shopify Jusqu'à la fin de la quatrième étape, j'ai développé une application Next JS et j'ai configuré deux pages (navigation intégrée à l'application), Home et Page1. Maintenant, quand je clique pour ouvrir les deux pages, l'application fait un rechargement au lieu d'acheminer...

Vous pouvez voir ici le problème de scintillement - https://youtu.be/45RvYgxC7C0

Toute aide à ce sujet serait très appréciée.

_app.js

import React from "react";

import App from "next/app";
import Head from "next/head";

import { AppProvider } from "@shopify/polaris";
import { Provider } from "@shopify/app-bridge-react";
import Cookies from "js-cookie";

import "@shopify/polaris/dist/styles.css";
import "../css/styles.css";

import lang from "@shopify/polaris/locales/en.json";

export default class MyApp extends App {
    render() {
        const { Component, pageProps } = this.props;
        const config = { apiKey: API_KEY, shopOrigin: Cookies.get("shopOrigin"), forceRedirect: true };

        return (
            <React.Fragment>
                <Head>
                    <title>My App</title>

                    <meta charSet="utf-8" />
                    <meta name="viewport" content="width=device-width, initial-scale=1" />

                    <link rel="icon" href="favicon.ico" />
                </Head>

                <Provider config={config}>
                    <AppProvider i18n={lang}>
                        <Component {...pageProps} />
                    </AppProvider>
                </Provider>
            </React.Fragment>
        );
    }
}

home.js

import React from "react";

import { Page, Layout, Card, FooterHelp, Link } from "@shopify/polaris";

export default function Home() {
    return (
        <Page title="Home">
            <Layout>
                <Layout.Section>
                    <Card title="Online store dashboard" sectioned>
                        <p>View a summary of your online store’s performance.</p>
                    </Card>
                </Layout.Section>

                <Layout.Section>
                    <FooterHelp>
                        Learn more about{" "}
                        <Link url="#" external>
                            our app
                        </Link>
                    </FooterHelp>
                </Layout.Section>
            </Layout>
        </Page>
    );
}

Page1.js

import React from "react";

import { Page, Layout, Card, FooterHelp, Link } from "@shopify/polaris";

export default function Page1() {
    return (
        <Page title="Page1">
            <Layout>
                <Layout.Section>
                    <Card title="Online store dashboard" sectioned>
                        <p>View a summary of your online store’s performance.</p>
                    </Card>
                </Layout.Section>

                <Layout.Section>
                    <FooterHelp>
                        Learn more about{" "}
                        <Link url="#" external>
                            our app
                        </Link>
                    </FooterHelp>
                </Layout.Section>
            </Layout>
        </Page>
    );
}

Demandé el 18 de Août, 2020 par Alexis

Answer 1

2 Réponses

Answer 2

4voto

Drew Watkins Points 188

Lorsque vous utilisez l'app-bridge de Shopify, son comportement par défaut consiste à naviguer vers une nouvelle route dans l'iframe qui contient votre application (et donc à recharger complètement l'application), alors que React met en œuvre un routeur côté client.

Shopify ne fournit pas une solution 100% plug-and-play pour l'utilisation du routage côté client, mais il rend les choses assez faciles avec sa fonction ClientRouter composant.

Les exemples sur cette page concernent react-router, et non le routeur de Next.js, mais la même idée s'applique à next/router.

Par exemple, un composant routeur simple pourrait ressembler à ceci :

import {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 { route } = 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.ActionType.APP, ({ path }) => {
      Router.push(path);
    });
  }, []);

  return appBridge && route ? (
    <ShopifyRoutePropagator location={route} app={appBridge} />
  ) : null;
}

export default RoutePropagator;

Après avoir créé ce composant, déposez-le dans le fichier _app.js à l'intérieur des routeurs Shopify, par exemple :

<Provider config={config}>
  <AppProvider i18n={translations}>
    <RoutePropagator />
    <ApolloProvider client={client}>
      // child components
    </ApolloProvider>
  </AppProvider>
</Provider>

Lorsque _app se charge, il s'abonne maintenant aux changements provenant d'appBridge et fait savoir à appBridge qu'il doit envoyer un signal au client plutôt que de recharger l'iframe entier. Si vous appliquez un routage dans l'application, par exemple d'une page à une autre, la barre d'adresse du navigateur sera également mise à jour.

Répondu el 19 de Août, 2020 par Drew Watkins (188 Points )

Answer 3

0voto

Ivan V. Points 4134

Tout fonctionne correctement, vous chargez la page entière à chaque fois que vous demandez un nouvel enregistrement. nextjs page. Pour que certaines parties de votre mise en page persistent entre les chargements de page, vous devez les déplacer dans le dossier de l'utilisateur. _app.js . Jetez un coup d'œil au site officiel exemple de mise en page d'une application dynamique .

Si vous voulez charger une sous-section de la page sans recharger toute la page, vous pouvez utiliser une balise query en combinaison avec Routes peu profondes Par exemple example.com/settings y example.com/settings?section='profile'

Répondu el 18 de Août, 2020 par Ivan V. (4134 Points )

Les pages sont rechargées au lieu d'être acheminées dans l'application shopify next js

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Les pages sont rechargées au lieu d'être acheminées dans l'application shopify next js

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: