Question

我有一个“收藏夹”按钮，如果非登录用户单击该按钮，则应将其重定向到登录页面。

此按钮如下所示：

                <Button
                  onClick={() => addFavorite(card, props.loggedUser)}
                  color={
                    favorites.includes(card.id) ? "google plus" : "twitter"
                  }
                  icon={
                    favorites.includes(card.id) ? "heart" : "heart outline"
                  }
                />

我尝试了几种创建条件重定向用户的方法，但是遇到了一些问题。

我首先尝试过：

onClick={() => typeof props.loggedUser.id === "undefined" ? <Redirect to="/login" /> : addFavorite(card, props.loggedUser)}

这是我的loggingUser状态：

{token: undefined, firstName: undefined, id: undefined, favorites: undefined, username: undefined}

我认为这是正确的第一个条件，因为addFavorite函数未运行，但未重定向到登录页面。

我也尝试了props.push历史记录，但是我使用的是redux，当我试图用withRouter包装我的主应用程序时，这引起了问题。不知道我做错了什么，但我也担心其他组件能否正确使用道具。我对此可能是错的，但是无论哪种方式，如果有最好的方法可以做到这一点，我都是耳熟能详的。谢谢。

Answer 1

要手动重定向到其他路线，您需要使用history.push(url)注入组件的道具中的react-router-dom。

如果未定义props.history，则需要使用withRouter HOC包装该组件，或使用useHistory的{{1}}（钩子可以从V5.1中获得）

react-router-dom

使用React Router的条件重定向

1 个答案: