如何使用带中继的 React 路由器？

Question

我正在努力解决反应路由器和中继集成问题。

到目前为止，我坚持这个例子

它使用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>
  );
};

Answer 1

根据中继文档：

React Router v4 基于组件的方法不容易聚合嵌套路由的数据需求，因此不容易允许避免嵌套 QueryRenderer 组件的请求瀑布的方法。

所以基本上使用react-router和Relay已经过时了:(

Relay建议使用Found作为替代路由器，这与react-router类似。Found 使用found-relay包与Relay 很好地集成。