next-i18next与Next +阿波罗没有正常工作。

Question

我最近加入了一个新项目，我必须实现i18n。前端堆栈: NextJS (与下一个八月一起)+阿波罗+ next-i18next，我跟随next-i18next来实现翻译。在我添加addWithTranslation部件之前，一切都很好，如下所示：

在_app.tsx中

    import { appWithTranslation } from 'next-i18next';

    const MyApp = ({ Component, pageProps: { session, ...pageProps } }) => {
    return (
        <>
            <ApolloProvider client={client}>
                    <SessionProvider session={session}>
                        {Component.requireAuth ? (
                            <>
                                <Auth>
                                    <Layout>
                                        <Component {...pageProps} />
                                    </Layout>
                                </Auth>
                            </>
                        ) : (
                            <>
                                <Component {...pageProps} />
                            </>
                        )}
                    </SessionProvider>
            </ApolloProvider>
        </>
    );
};

const Auth = ({ children }) => {
    const router = useRouter();
    const { status } = useSession();

useEffect(() => {
        if (status === 'unauthenticated') {
            router.push('/auth/signIn');
        }
    }, [status, router]);

    if (status === 'authenticated') {
        return children;
    }

    return (
        <div className="lds-ellipsis">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    );
};

export default appWithTranslation(MyApp);

我的问题是:每当用户试图进入另一个页面时，整个应用程序似乎都会重装，因此它会重定向到/auth/signin，而不是立即到达正确的页面。当我记录会话时，每次用户导航到另一个页面时(仅当我添加appWithTranslation()部件时)，它似乎都会重置。

有人知道我怎么能修好它吗？

Answer 1

基于这一讨论，不应该将SessionProvider封装在appWithTranslation中。所以试着做这样的事情：

import { appWithTranslation } from 'next-i18next';

const MyApp = ({ Component, pageProps }) => {
  return (
    <>
      {Component.requireAuth ? (
        <Auth>
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </Auth>
      ) : (
        <Component {...pageProps} />
      )}
    </>
  );
};

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props) => {
  const { pageProps } = props;

  return (
    <ApolloProvider client={pageProps.client}>
      <SessionProvider session={pageProps.session}>
        <AppWithI18n {...props} />
      </SessionProvider>
    </ApolloProvider>
  );
};

export default AppWithAuth;