本文链接:https://blog.csdn.net/zeroyulong/article/details/81911704
困扰了好久的问题,最终还是在官方文档上找到了答案(看英文文档真心难受啊~~)

官方文档地址:https://reacttraining.com/react-router/web/example/auth-workflow

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>
)

[web前端] react router4.0 登录后返回之前浏览页面(回到来源页)的更多相关文章

  1. 在PHP中如何实现在做了么个操作后返回到指定页面

    我们经常会碰到类似用户在没有登录的情况下进行提问.评论,需要用户登录后返回刚才浏览的网页,这种功能用cookie保存当前url地址来实现.我用的是jquery,读者需要懂点jquery中的ajax请求 ...

  2. php弹出式登录窗口并获得登录后返回值

    一款bootstrap样式结合php制作的弹出式登录窗口,输入用户名和密码后,ajax传参给后台,并获得登录后返回值. hwLayer+ajax弹出登录框 $(function() { $('#for ...

  3. Web前端开发最佳实践(4):在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  4. Web前端初级问题—ajax登录跳转登录实现

    当我们的用户进行系统登录时,用户名和密码的验证都是后端验证的.而且,用户登录状态也是要后端设置的,查询数据库后,用户名和密码正确,则在session中存储一个uuid,每个页面需要根据登录状态判断展示 ...

  5. thinkphp实现登录后返回原界面

    主要思路还是用session记录原地址,在登录后再跳转回原界面 先保存请求login方法界面的url public function savelogin(){ session('returnUrl', ...

  6. WordPress用户登录后重定向到指定页面

    这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中: function  ...

  7. CAS3.5.2 Server登录后返回用户信息详细解决方案

    单点登录(Single Sign-On, 简称SSO)是目前比较流行的服务于企业业务整合的解决方案之一,SSO使得在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.大家在使用时CA ...

  8. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  9. [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解

    cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...

随机推荐

  1. Java 之 Response 对象

    Response 对象 一.Response 原理和继承结构 原理和继承结构参考 request. 二.Response 对象 Response 就是用来设置响应消息. 1.设置响应行   响应头格式 ...

  2. 大数据之kafka-02.搞定kafka专业术语

    02.搞定kafka专业术语 在kafka的世界中有很多概念和术语是需要我们提前理解并且熟练掌握的,下面来盘点一下. 之前我们提到过,kafka属于分布式的消息引擎系统,主要功能是提供一套完善的消息发 ...

  3. MySQL--使用mysqldump进行数据库版本升级

    在MySQL跨版本升级时,建议使用mysqldump方式导出用户权限和用户数据,即使是小版本升级,导出过程中也应忽略系统数据库,避免系统表不兼容. 导出用户数据库脚本和用户创建脚本 ##======= ...

  4. 记一次至今懵逼的bug

      <update id="falseDeleteBatchByPKArr" parameterType="java.lang.String"> U ...

  5. git 上传代码流程

    1.首先下载git,安装到本地 2.点击启动git bash.exe 3.现在本地创建一个文件夹 后cd 进入该文件夹内 4.在文件夹内输入 git init   是此文件夹变成一个git本地仓库 5 ...

  6. Integer面试连环炮以及源码分析

    场景:   昨天有位朋友去面试,我问他面试问了哪些问题,其中问了Integer相关的问题,以下就是面试官问的问题,还有一些是我对此做了扩展. 问:两个new Integer 128相等吗? 答:不.因 ...

  7. switch表达式可使用的类型

    在java中switch后的表达式的类型只能为以下几种:byte.short.char.int(在Java1.6中是这样),在java1.7后支持了对string的判断.

  8. RDD&Dataset&DataFrame

    Dataset创建 object DatasetCreation { def main(args: Array[String]): Unit = { val spark = SparkSession ...

  9. Mybatis框架-Delete节点元素的使用

    这个就也比较简单,需求:将我们最新插入的那条数据删除掉,从用户表中. UserMapper.xml UserMapper.java 编写测试方法: @Test public void testDele ...

  10. 斜率优化板题 HDU2829 Lawrence

    题目大意:给定一个长度为nnn的序列,至多将序列分成m+1m+1m+1段,每段序列都有权值,权值为序列内两个数两两相乘之和.求序列权值和最小为多少? 数据规模:m<=n<=1000.m&l ...