本文链接: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. HDFS之安全模式

    1.namenode启动的时候,首先将映像文件[fsimage]载入内存,并执行编辑日志[edits]中的各项操作. 2.一旦在内存中成功建立文件系统元数据的映射,则创建一个新的fsimage文件[这 ...

  2. intellij IDEA github clone 指定分支代码

    1.问题描述 在实际开发中,我们通常会使用idea克隆一个新项目(clone),通常情况下,我们默认克隆的是master分支,但是如果master分支只是一个空文件夹而已,真正的代码在develop分 ...

  3. weblogic如何修改密码&密码找回

    一.修改Console密码后,挂载的服务无法重启[解决办法] 1. 打开weblogic控制台,安全领域 --> myrealm --> 用户和组,将会看到weblogic用户,可以直接删 ...

  4. Redis:Linux安装与使用

    Redis的存储结构:字符类型,散列类型,列表类型,集合类型,有序集合. Redis功能: 可以为每个key设置超时时间. 可以通过列表类型来实现分布式队列的操作. 支持发布订阅的消息模式. 为什么使 ...

  5. GDI双缓冲

    GDI双缓冲 翻译自Double buffering,原作者Dim_Yimma_H 语言:C (原文写的是C++,实际上是纯C) 推荐知识: 构建程序 函数 结构体 变量和条件语句 switch语句 ...

  6. python测试开发django-43.xadmin添加小组件报错解决

    前言 xadmin首页上有个添加小组件按钮,打开的时候会报错“render() got an unexpected keyword argument 'renderer'”环境:python3.6dj ...

  7. Ubuntu安装Gitlab Runner

    第一步: 添加GitLab的官方存储库:    curl -L https://packages.gitlab.com/install/repositories/runner/gitlab-runne ...

  8. Oracle11g安装步骤(CentOS7)

    安装环境:CentOS 7(64位) . oracle11G 的压缩包 第一步:创建相关目录,并将安装包放在指定路径下 [root@localhost data]# pwd/data[root@loc ...

  9. Linux学习21-设置定时任务crontab

    前言 做自动化测试写的脚本需设置定时任务,在指定的时间去执行,这就需要用到定时任务.之前用jenkins可以在里面设置定时任务,很好用,其实不用jenkins,在linux上也可以用crontab做个 ...

  10. Alpha冲刺随笔九:第九天

    课程名称:软件工程1916|W(福州大学) 作业要求:项目Alpha冲刺(十天冲刺) 团队名称:葫芦娃队 作业目标:在十天冲刺里对每天的任务进行总结. 随笔汇总:https://www.cnblogs ...