内容简介:在我们自己实现react-router的路由拦截之前,我们先看一下vue的路由拦截是怎么使用的,都做到了哪些事情:正如其名,你可以使用
在我们自己实现react-router的路由拦截之前,我们先看一下vue的路由拦截是怎么使用的,都做到了哪些事情:
正如其名, vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
全局守卫
你可以使用 router.beforeEach 注册一个全局前置守卫:
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... 复制代码
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
在这里,我们可以看到,vue在所有的路由跳转前,在beforeEach中可以监听所有的路由跳转,如果符合规则,就进行跳转,如果不符合,那么就跳转到我指定的位置。
react-router当中,为什么不能提供同样的api呢?作者在github中回复到:
You can do this from within your render function. JSX doesn't need an API for this because it's more flexible. 复制代码
大概的意思就是就是:
您可以在渲染功能中执行此操作。JSX不需要API,因为它更灵活。 复制代码
在作者的回复当中可以看到,他希望react-router是灵活的,不希望在里面添加太多的api,这些api应该是让使用者,根据自己的需求去实现自己的路由拦截。下面,就开始实现一个自己的,可以满足大部分需求的路由拦截。
react-router版本:4.0
首先,我们要使用react-router-config,用数组的形式去写一个路由的配置:
//routerConfig.js const routes = [ { path: '/', component: 'component/app', routes: [ { path: '/asd', component: 'component/topics', routes: [ { path: '/asd/login', component: 'component/home' } ] } ] } ] export default routes 复制代码
用配置的方式写,是因为这样可以很直观的看出来,我们整个项目的路由配置,知道我们具体要跳转到什么位置,在什么位置下,会显示什么样的组件。
应该可以看出来,这里面我写的两个地方,和文档是有区别的:
1.我整个数组只有一个列表项,只有这个一个对象。 2.我的compoent的值是字符串,而不是一个对象或者方法 复制代码
第一点:因为,我们可能要在当前的页面中,需要一个根路由,在根路由中,我们要可能做一些类似与主题颜色的设定,全局内容的展示之类的操作,在这里,我们就可以做到了,剩下的,都在他的 routes 里面去做就ok了。
第二点:这么做的目的,就是为了实现路由更快的渲染,在正常的使用方式中,我们一般都是这样的:
//伪代码,仅供参考 import A from './a' { path:'/', component:A } 复制代码
基本上是这样实现的,这样实现是有一个问题,如果我们的页面,有20哥,甚至50个、100个要跳转的路径,怎么办,这样我们每次加载到router.js这个文件的时候,是需要把这么多的文件都import过来,这样是很影响代码的执行效率和页面的渲染速度的。
具体怎么渲染,我们会在下面去一一细分。
由于,路由的整体,是一个数组(array),我们要在这里,去做一个循环,如果我们用最笨重的方式去实现
<Route path='/' component={a} /> <Route path='/b' component={b} /> <Route path='/c' component={c} /> <Route path='/d' component={d} /> ... 复制代码
很明显,这个样子去实现一个路由的跳转,是不明智的,我们要写的是一个可维护,易读性强的路由。
所以,我在这里写了一个用来遍历路由数组的方法。
//renderRoutesMap.js import RouterGuard from './routerGuard' const renderRoutesMap = (routes) => ( routes.map((route, index) => { return ( <Route key={index} path={route.path} render={props => ( <RouterGuard {...route} {...props} /> )} /> ) }) ) export default renderRoutesMap 复制代码
这里我们把路由的渲染做了一个小小的遍历,把我们的路由对象,去做了一次遍历,重点来了!!!
RouterGuard就是我们的重点,在这里,我们就要做真正的,路由拦截(导航守卫)!
//routerGuard.js import React, { Component } from 'react' import { withRouter } from 'react-router-dom' import Loadable from 'react-loadable' import { connect } from 'react-redux' import renderRoutesMap from './renderRoutesMap' const mapStateToProps = state => (state) const mapDispatchToProps = dispatch => ({ ...dispatch }) class RouterGuard extends Component { constructor(props) { super() } componentWillMount() { let { history: { replace }, authorization, location } = this.props if (authorization) replace('./login') if (location.pathname === '/') replace('./asd') console.log('路由跳转前的拦截', this.props) } render() { let { component, routes = [] } = this.props console.log('准备渲染compoent前', this.props) const LoadableComponent = Loadable({ loader: () => import(`../${component}`), loading: () => ( <span>11111</span> ) }) return ( <div> <LoadableComponent {...this.props} /> {renderRoutesMap(routes)} </div> ) } } export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RouterGuard)) 复制代码
在这里,其实是我项目当中使用的代码,所以里面会有react-redux,大家如果不使用redux的话,可以自行拆解。
componentWillMount是react组件当中的生命周期,在渲染前调用,在这里,我们可以拿到redux当中的参数,也可以拿到通过路由带过来的参数。
在这里,我用的是authorization,如果我的authorization是true,就代表我没有登录,跳转到login登录页。
我还做了重定向的操作,比如在根路由的时候,我要重定向跳转到另外一个地址。
其实这样就可以实现真正的路由拦截了,但是,这个还不够,我们不只要做拦截,我们还要做的是,除拦截以外,还要尽可能的加快渲染速度,提升用户体验。
这里,我有用到一个Loadable的插件,他的作用就是用于加载具有动态导入的组件的更高阶组件,提升用户体验。
我在这里,才用的import,improt是不支持变量的,所以我这里用的是模版字符串的方式,在每一次进入组件,并准备render的时候,才去import该组件,这样,可以在每一次渲染的时候不用浪费资源,也可以保证首次渲染的速度变快。
最后,我们把路由配置、路由数组渲染、路由组件渲染给拼接一下,一整个react-router路由拦截(导航守卫)
//renderRoutes.js import renderRoutesMap from './renderRoutesMap' /** * renderRoutes 渲染路由 * @param {array} routes 路由列表 * @param {object} extraProps = {} extra的属性 * @param {object} switchProps = {} switch的属性 */ const renderRoutes = ({ routes, extraProps = {}, switchProps = {} }) => ( <Router> <Switch {...switchProps}> {renderRoutesMap(routes)} </Switch> </Router> ) export default renderRoutes //index.js const router = () => ( renderRoutes({ routes: routerConfig }) ) export default router 复制代码
最后在页面当中,引入index.js就可以了。
这是本人在学习和工作当中使用的方式,如果哪里有什么不对了,还希望大家可以给予指出。最后,希望大家多点赞,多关注,谢谢啦:pray:
以上所述就是小编给大家介绍的《如何实现一个react-router路由拦截(导航守卫)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- angular 路由守卫
- Vue-router进阶:导航守卫
- Vue的路由动态重定向和导航守卫实例
- vue-router导航守卫进阶&源码实现
- 在哪种感觉守卫比命令更好 – 如果? (haskell新手)
- 每天抵抗4000万次黑客访问,这个天猫双11,阿里巴巴如何守卫消费者权益?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。