本文链接: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. Maven项目命名规范

    Guide to naming conventions on groupId, artifactId and versiongroupId will identify your project uni ...

  2. 如何用 DHCP + DNS + Web 实现一个网络架构

    为什么?为什么?为什么在浏览器里输入www.baidu.com就可以访问百度搜索,而输入pan.baidu.com就可以访问百度网盘,它是怎么实现的? 实验原理简介 在Internet中,计算机之间通 ...

  3. 从linux进程角度看JVM内存模型

    普通进程栈区,在JVM一般仅仅用做线程栈,如下图所示 首先是永久代.永久代本质上是Java程序的代码区和数据区.Java程序中类(class),会被加载到整个区域的不同数据结构中去,包括常量池.域.方 ...

  4. 学会 Debug

    如何成为优秀程序员第 2/100 期分享 01 调试(Debug)是成为一个程序员的基石. 调试这个词第一个含义即是移除错误,但真正有意义的含义是,通过检查来观察程序的运行.一个不会调试的程序员等同于 ...

  5. JAVA设计模式之工厂模式—Factory Pattern

    1.工厂模式简介 工厂模式用于对象的创建,使得客户从具体的产品对象中被解耦. 2.工厂模式分类 这里以制造coffee的例子开始工厂模式设计之旅. 我们知道coffee只是一种泛举,在点购咖啡时需要指 ...

  6. 用python+openpyxl从表格中读取测试用例的多条数据,然后将执行结果写入表格中

    # -*- coding: utf-8 -*- from selenium import webdriver from openpyxl import load_workbook class mylo ...

  7. Vuex 是什么?

    Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变   什么是"状态管 ...

  8. 【python】Requests 库支持RESTFUL的几种方式

    Get: 查看资源 POST: 增加资源 PUT:修改资源,更新全部资源 PATCH:修改资源,更新局部资源 DELETE: 删除资源 HEAD: 查看响应头 OPTIONS: 查看请求方式

  9. FTP服务FileZilla Server上传提示550 Permission denied

    原文地址:https://help.aliyun.com/knowledge_detail/5989224.html 相关文章 1.filezilla通过root账户远程连接管理ubuntu serv ...

  10. 《vue》实现动态显示与隐藏底部导航方法!

    在日常项目中,总有几个页面是要用到底部导航的,总有那么些个页面,是不需要底部导航的,这里列举一下页面底部导航的显示与隐藏的两种方式: 其实很简单,我们在路由里面带上参数,这个参数就用来区分那个页面显示 ...