Question

在我的应用程序中，我会像这样从'/'自动定向到'/ PageOne'：

const Home = () => {
  const router = useRouter();

  useEffect(() => {
    router.push('/pageone', undefined, { shallow: true });
  }, []);

  return <PageOne />;
};

在我的PageOne中，我想像这样使用getInitialProps：

const pageOne = (data) => {

  return (
    <Layout>
      ...
    </Layout>
  );
};

pageOne.getInitialProps = async (
  ctx: NextPageContext
): Promise<{ data }> => {
  const response = await someAPICall()
  return {
    data: response.data
  };
};

export default pageOne;

这将在我的主页中导致错误，因为我使用引用了PageOne，并且缺少参数“数据”，但是由于在渲染主页时数据不存在，因此我无法将数据传递给该参数。

我应该调用API来在首页而不是PageOne中获取数据吗？如果这样做，刷新PageOne是否会导致另一个API调用来获取最新数据，或者仅在刷新首页时才会调用该API？

Answer 1

请勿使用shallow路由，因为这仅是为了更改url-一个很好的用例是添加查询字符串或向应用程序表明添加了书签后发生了更改，例如：{{1} }（不是您的用例）

浅路由允许您更改URL，而无需再次运行数据获取方法，包括getServerSideProps，getStaticProps和getInitialProps。

这是此页面中提到的警告之一=> https://nextjs.org/docs/routing/shallow-routing#caveats

如果还没有，那么您将受益于开始在应用程序中使用全局状态

https://github.com/vercel/next.js/tree/canary/examples/with-redux

，或者您可以使用内置功能： https://www.basefactor.com/global-state-with-react

从一页自动定向到另一页时在哪里使用getInitialProps

1 个答案: