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

Posted 2023-03-08

【中文标题】如何处理 Relay Modern v6 / 实验中的嵌套路由

【英文标题】：How to deal with nested routing in Relay Modern v6 / experimental

【发布时间】：2020-01-18 11:13:06

【问题描述】：

我知道relay documentation 声明 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/，但是到目前为止，我还没有找到一个很好的示例来说明如何以正确的方式处理中继中的嵌套路由。并且通过“以适当的方式”我不是在谈论使用“找到中继”，而是使用只做“路由”部分并且做得很好的路由器。

【问题讨论】：

你解决了吗？

已经有解决方案了吗？

github.com/relayjs/relay-examples/tree/master/issue-tracker

您找到解决方案了吗？ relay-examples/issue-tracker 仅此而已..

relay-examples/issue-tracker 显示了基本路由，但它发明了自己的路由......这似乎不值得。此外，有时重新渲染的数量非常庞大。整个接力的东西看起来就像一个痛苦和半生不熟的东西......电影或文章或教程的数量真的很少......而且能找到的都是3-4岁......所以， （可能非常固执和情绪化）建议是使用阿波罗。它似乎有更多的支持，有很好的例子，而且它的成长很容易看到。当然，它还可以很好地与 react-router 集成。

【参考方案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>
  );

除了你添加<Route preload=() => loadQuery()>，它连接了 Relay 和路由器之外，基本上所有内容都与中继文档和 react-router 文档中的路由相同。