何时以及如何使用 Apollo 客户端和 React 路由器进行重定向

Posted 2023-03-10

【中文标题】何时以及如何使用 Apollo 客户端和 React 路由器进行重定向

【英文标题】：When and how to redirect with Apollo Client and React Router

【发布时间】：2019-05-22 07:01:02

【问题描述】：

我使用 Apollo 创建了一个 React 组件，我目前使用渲染函数在数据加载后执行重定向，但我收到警告：Warning: Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

这是我的代码： https://gist.github.com/jmn/c3f7c4489cd5f759808a62b48352ce87

重定向部分：

render() 
    return (
      <Query query=Q variables= cursor: this.props.match.params.id >
      ( loading, error, data, fetchMore ) => 
        if (loading) return <p>Loading...</p>;
        if (error) return <p>Error :(</p>;
        if (!this.props.match.params.id) 
          this.props.history.push(
            "/post/" + data.allPosts.pageInfo.endCursor
          );
        
        return (
          <div></div>
        )

如何在惯用的 React 代码中做到这一点并避免任何警告？

【参考方案1】：

看起来您正在使用 React Router v4，尽管我不太确定。正如在 React 路由器中看到的 docs

历史是可变的

这就是为什么调用this.props.history.push() 会导致上述错误。相反，不要改变历史道具，请考虑使用<Redirect /> 组件，如下所示：

if (!this.props.match.params.id) 
   return <Redirect to="/post/" + data.allPosts.pageInfo.endCursor

有关<Redirect /> 的更多信息，请参阅here

【讨论】：

感谢您的回答。当我尝试这个时，我得到了这个错误：“第 65 行：期望一个赋值或函数调用，而是在

上看到一个表达式 no-unused-expressions ”

我创建了一个包含条件 的函数，并在渲染函数返回语句中调用它，这很有效，谢谢。

很抱歉。我在上面编辑了我的答案，因为您实际上需要返回 组件。很高兴你想通了