1

我最近加入了一个新项目，我必须实施 i18n。前端堆栈：NextJS (with Next Auth) + Apollo + next-i18next 我跟着 next-i18next starter 来实现翻译。在我添加零件之前一切正常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()部分时）。

有谁知道我该如何解决？

4

1 回答 1

0

根据这个讨论，你不应该把SessionProviderin换行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;
于 2022-02-17T13:17:48.137 回答