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

此按钮如下所示:

                <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包装我的主应用程序时,这会引起问题。不知道我做错了什么,但我也担心其他组件能否正确使用道具。在这方面,我可能是错的,但是无论哪种方式,如果有最好的方法可以做到这一点,我将不知所措。谢谢。

最佳答案

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

如果未定义props.history,则需要使用withRouter HOC包装该组件,或使用useHistory(V5.1中提供了钩子)react-router-dom中的钩子

const addFavorite = (card) => {
 if(!props.loggedUser.id) {
   props.history.push('/login')
   return
 }

 // add to favorites
}

<Button onClick={() => addFavorite(card)} />

09-17 22:15
查看更多