react router4.0 登录后返回之前浏览页面(回到来源页)

编程入门 行业动态 更新时间:2024-10-12 08:26:47

react router4.0 登录后返回之前浏览页面(回到<a href=https://www.elefans.com/category/jswz/34/1771151.html style=来源页)"/>

react router4.0 登录后返回之前浏览页面(回到来源页)

困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~)

官方文档地址:

1.来源页中跳转登录按钮:

将本页pathname存放到路由state中,

<Link to={{pathname:"/login",state:{from:this.props.location.pathname}
}}  className="name-load">去登录</Link>

2.跳转到登录页面后,获取来源,登录完成后页面重定向至来源页面(判断是否有来源页面,若用户直接进入的是登录页面,则无法获取state,此时应提供一个默认首页供用户跳转)

        //来源记录let from;if(this.props.location.state != null){from = this.props.location.state.from}const urlTo = from ||'/App';return (<div>{this.props.isAuth?<Redirect to={urlTo} />:null}<p>你没有权限,需要登录才能看</p><button onClick={this.props.login}>点我登录</button></div>)

 

更多推荐

react router4.0 登录后返回之前浏览页面(回到来源页)

本文发布于:2024-02-24 16:07:12,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1695885.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:来源   页面   react

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!