Страницы перезагружаются вместо перенаправления в приложении shopify next js

Я следовал руководству Shopify до конца 4-го шага, чтобы разработать приложение Next JS, и я установил две страницы (встроенная навигация приложения), Home и Page1. Теперь, когда я нажимаю, чтобы открыть обе страницы, приложение выполняет перезагрузку вместо маршрутизации...

Здесь вы можете увидеть мигающую проблему - https://youtu.be/45RvYgxC7C0

Любая помощь по этому поводу будет очень признательна.

_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>
    );
}
Источник

2 ответа

Решение

При использовании Shopify app-bridge он имеет поведение по умолчанию для перехода к новому маршруту в iframe, который содержит ваше приложение (и, таким образом, полностью перезагружает приложение), тогда как React реализует маршрутизатор на стороне клиента.

Shopify не предоставляет 100% готового решения для использования маршрутизации на стороне клиента, но они действительно упрощают это с помощью своего компонента ClientRouter.

Примеры на этой странице предназначены для response-router, а не для маршрутизатора Next.js, но та же идея применима к next/router.

Например, простой компонент маршрутизатора может выглядеть так:

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/react-shopify-app-route-propagator";

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;

После создания этого компонента поместите его в файл _app.js внутри роутеров Shopify, например:

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

Когда _app загружается, он теперь будет подписываться на изменения из appBridge и сообщать appBridge об отправке сигнала клиенту, а не перезагрузке всего iframe. Если вы примените любую маршрутизацию в приложении, например, от одной страницы к другой, теперь она также обновит адресную строку браузера.

Источник

Все работает правильно, вы загружаете всю страницу каждый раз, когда запрашиваете новый nextjsстраница. Чтобы части вашего макета сохранялись между загрузками страниц, вам необходимо переместить их в_app.js. Взгляните на официальный пример макета динамического приложения.

Если вы хотите загрузить подраздел страницы без перезагрузки всей страницы, вы можете использовать queryв сочетании с мелкой маршрутизацией, напримерexample.com/settings а также example.com/settings?section='profile'

Источник
Другие вопросы по тегам