React进阶（五）：导航守卫_renderroutes

在《React进阶（四）：路由介绍》博文中，介绍了React路由相关知识，在实际项目开发过程中，路由之间的跳转必定涉及权限、用户是否登陆等限定条件的判定，故需要导航守卫来完成这一事项。

在实现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 })
### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。



高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

![html5](https://img-blog.csdnimg.cn/img_convert/d35c2cf2d5364b4907e65f1856c923a4.png)