我有一个“收藏夹”按钮,如果非登录用户单击该按钮,则应将其重定向到登录页面。
此按钮如下所示:
<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)} />