我如何将反应路由器与中继一起使用？

问题描述

我正在为 react-router 和中继集成而苦苦挣扎。

截至目前，我坚持to this example

它使用 useLazyLoadQuery 钩子，虽然一切似乎都很好，但我也看到了另一种方法：usePreloadedQuery。

文档说 useLazyLoadQuery 钩子

如果不小心使用，可能会触发多个嵌套或瀑布式往返行程，并等到渲染开始数据获取（通常比渲染更早开始），从而降低性能。相反，更喜欢 usePreloadedQuery。

然而，不清楚如何将它与 react-router 集成，显然，我不想重新发明我自己的路由器......

我注意到的另一件事是 usePreloadedQuery 应该与 useQueryLoader; 同时在文档中，他们通过调用 loadQuery();

直接加载它

所以我不确定哪种方式更受欢迎。

我最终得到了这样的包装器：

const WrappedHomePage = () => {
  const [queryRef,loadQuery] = useQueryLoader(HomePageQuery);

  // does calling it like this make any sense at all?
  useMemo(() => {
    loadQuery();
  },[loadQuery]);

  return <HomePage queryRef={queryRef} />;
};

const HomePage = ({ queryRef }) => {
  const query = usePreloadedQuery(
    graphql`
      query HomePageQuery {
        ...HomePageContainer_repository
      }
    `,queryRef
  );

  return (
    <div>
      <HomePageContainer fragmentRef={query} />
    </div>
  );
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）