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

本文链接: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>
)

原文地址:https://www.cnblogs.com/0616--ataozhijia/p/11351528.html

时间: 2024-10-01 07:34:45

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

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

我们经常会碰到类似用户在没有登录的情况下进行提问.评论,需要用户登录后返回刚才浏览的网页,这种功能用cookie保存当前url地址来实现.我用的是jquery,读者需要懂点jquery中的ajax请求.这个场景的cookie名我用'__forward__',读者可以用自己需要的标识符. 1. 不下载cookie.js.用post请求将当前网页的ulr地址传到后台,让后台用cookie保存url地址:在完成类似登录的页面的功能后,从cookie中取出来,用于页面跳转. 1.1  html页面 //

JS 页面离开事件 页面关闭事件,实现登录成功返回上个页面

壹 ? 引 登录成功后跳转到上一个页面是很常见的需求,比如在天猫添加购物车时网站会效验用户登录情况,若未登录则跳转登录,登录成功返回到先前的商品页. 这个功能实现并不困难,但因为我的奇思妙想让我先后了解了window.history对象以及窗口关闭/离开事件onbeforeunload,那么让这个需求做个引子,让我们开始一次有趣的探索之旅. 贰 ? 有趣的onbeforeunload 不管是从什么页面进入的登录页,总是得先有个离开页面的过程,那我在离开前一个页面时先记住页面,登录成功调回来不就好

thinkphp实现登录后返回原界面

主要思路还是用session记录原地址,在登录后再跳转回原界面 先保存请求login方法界面的url public function savelogin(){ session('returnUrl',$_SERVER['HTTP_REFERER']); } 在登录方法最后跳转时控制 if($returnUrl = session('returnUrl')) { session('returnUrl',null); $this->success('登录成功',$returnUrl,0); }els

实现从页面登录后返回该页面

1. js 代码 /*获取源页面的url*/ var path = window.location.pathname.substr(7); /*将源页面的url作为参数传递到控制层*/ window.location.href="url?origin="+path; 2. java 代码 @RequestMapping(value = "/url") public String doLogin(String origin,HttpSession session){

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

这篇文章将向您展示WordPress用户登录后如何重定向到指定页面或者文章的技巧. 一.重定向到网站管理面板. 将以下代码添加到您的当前主题的 functions.php 文件中: function soi_login_redirect($redirect_to, $request, $user) { return (is_array($user->roles) && in_array('administrator', $user->roles)) ? admin_url() 

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

cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子做了升级,之前的路由用的还是v2.7.0版的,所以决定把路由也升级下,正好“尝尝鲜”... 江湖传言,目前官方同时维护 2.x 和 4.x 两个版本.(ヾ(??﹏?)??咦,此刻相信机智如我的你也会发现,ReactRouter v3 去哪儿了?整丢了??巴拉出锅了???敢不敢给我个完美的解释!?)事

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

cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节点,而是存在于内存之中的一种数据结构,叫做虚拟 DOM (virtual DOM).只有当它插入文档以后,才会变成真实的 DOM .根据 React 的设计,所有的 DOM 变动,都先 在虚拟 DOM 上发生,然后再将实际发生变动的部分,反映在真实 DOM上,这种算法叫做 DOM diff ,它 可

[Web 前端] React Js img 图片显示默认 占位符

cp from : https://blog.csdn.net/wyk304443164/article/details/77093339 没有考虑到兼容性,因为我们暂时只适配了webkit. 也没有考虑到懒加载,因为项目比较紧有需要加的朋友看react-lazyload,也比较简单,现成的轮子 /** * Created by wuyakun on 2017/8/11. * 会显示默认图片的image */ import React from 'react'; class DefaultIma

.NET CORE2.0发布后没有 VIEWS视图页面文件

以前做的CORE1.0的项目,发布的时候有views文件夹的,升级VS后用CORE2.0做项目,发布后没有views文件夹了,全编译到一个类似于Niunan.ZYYCY.Web.PrecompiledViews.dll中,上网搜索下没有搜索到,在群里问下,找到原因了,修改Niunan.ZYYCY.Web.csproj,在PropertyGroup下加入   <MvcRazorCompileOnPublish>false</MvcRazorCompileOnPublish>这样在发布