2021-01-12 10:11发布
现在页面在A路由组件上，跳转到B页面时不需要做拦截但是返回A到页面时要保留之前的状态，挑战到C页面时要提示是否离开，离开后在返回A页面不保留之前的状态
不同于vue，通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件（比如sessionID是否存在）来实现不同的组件的跳转，从而实习拦截。
接下来，我们实现一个简单的实例了解路由拦截的基本流程。
页面初次渲染的时候，需要我们进行登录。在这个首屏的页面里，我们放入一个链接。当点击链接，我们想进入我们的布局页面，（实际项目中是我们的后台）。但是布局页面是不允许我们随意进入的。如果没有登录（真实项目中我们以sessionid作为是否登录过的条件)，那么页面会强制进入登录页面。否则进入我们的布局页面（实际项目中的后台）
我们这里写几个基本的组件，作为上述条件对应的组件：
login.js -------->登录页面
Layout.js -------->布局页面（实际项目中的后台）
author --------->授权组件 （作为拦截组件，拦截的条件写在这个组件中）
isLogin ---------->判断是否登录过的条件 （实际项目中的sessionID）
这个实例我们需要一个判断条件。也就是isLogin，我们结合状态管理工具，（本实例中的状态管理工具选用mobx），isLogin==true，表示我们我们可以访问该组件。否则表示我们无权访问该组件。
最多设置5个标签!
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','/static/images/logo.png', '推荐 慢半拍 的问题《react路由跳转时怎么指定拦截页面？》','http://www.shouhuola.com/answer/32712/95657.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
不同于vue，通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件（比如sessionID是否存在）来实现不同的组件的跳转，从而实习拦截。
接下来，我们实现一个简单的实例了解路由拦截的基本流程。
页面初次渲染的时候，需要我们进行登录。在这个首屏的页面里，我们放入一个链接。当点击链接，我们想进入我们的布局页面，（实际项目中是我们的后台）。但是布局页面是不允许我们随意进入的。如果没有登录（真实项目中我们以sessionid作为是否登录过的条件)，那么页面会强制进入登录页面。否则进入我们的布局页面（实际项目中的后台）
我们这里写几个基本的组件，作为上述条件对应的组件：
login.js -------->登录页面
Layout.js -------->布局页面（实际项目中的后台）
author --------->授权组件 （作为拦截组件，拦截的条件写在这个组件中）
isLogin ---------->判断是否登录过的条件 （实际项目中的sessionID）
这个实例我们需要一个判断条件。也就是isLogin，我们结合状态管理工具，（本实例中的状态管理工具选用mobx），isLogin==true，表示我们我们可以访问该组件。否则表示我们无权访问该组件。
一周热门 更多>