如何处理 Relay Modern v6/experimental 中的嵌套路由

Question

我知道中继文档指出 react-router v4/5 对 Relay 不好，因为它们改为动态路由，但如果你仔细观察，它总是说：

“Jimmy Jia 于 2017-6-3 上次更新”

而且我也真的不想使用“Found Relay”。

我希望仍然能够访问我的 QueryRenderer 或 useQuery 而不是其上的抽象，所以你不能，这就是 Found 正在做的，所以这是不行的。

所以......随着刚刚发布的 Relay Modern v6，并在中继实验中偷偷摸摸地使用 useQuery、useFragment 等与 React Suspense 和 @defer（希望如此）集成的钩子即将到来 - 有什么建议和最好的2019 年使用 Relay Modern v6 处理嵌套路由的实践。

与 Suspense 的集成是不是动态路由开始变得更有意义了？

有很多关于非常简单的中继应用程序的例子，比如https://github.com/relayjs/relay-examples/，但到目前为止我还没有找到一个很好的例子来展示如何在中继中处理嵌套路由合适的方式。通过“以适当的方式”，我不是在谈论使用“发现中继”，而是使用仅执行“路由”部分并且做得很好的路由器。

Answer 1

我来自未来（2021），不幸的是这仍然是一个问题。

不过，一项改进是 React Router 发布了一个支持预加载的实验性 v6 分支。请注意，这与不包含实验性功能的 v6 beta 分支不同。当然，因为这是实验性的，所以您不能假设它会稳定，因此您可能需要固定封装，直到它变得稳定。

可以在这里找到如何使用此集成的一个很好的示例： https: //github.com/Hellzed/hello-relay-react-router-experimental。如果可以的话，请注明（并在 github 上加注星标）此示例的原作者。我将在这个答案中使用这个例子。

您可以使用以下命令安装此版本的路由器：

npm install history react-router-dom@experimental

然后，您按如下方式编写应用程序：

import React from "react";
import { useQueryLoader, usePreloadedQuery } from "react-relay/hooks";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import graphql from "babel-plugin-relay/macro";

const query = graphql`
  query AppHelloQuery {
    hello
  }
`;

function Hello({ queryReference }) {
  const data = usePreloadedQuery(query, queryReference);
  return <p>{data.hello}</p>;
}

function App() {
  const [queryReference, loadQuery] = useQueryLoader(query);

  return (
    <Router>
      <Routes>
        <Route
          path="/"
          preload={() => loadQuery()}
          element={
            <React.Suspense fallback="Loading...">
              <Hello queryReference={queryReference} />
            </React.Suspense>
          }
        />
      </Routes>
    </Router>
  );
}

基本上所有内容的编写方式都与中继文档和react-router文档中的路由相同，除了添加<Route preload={() => loadQuery()}>连接中继和路由器的 。