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`),我们要在这里,去做一个循环,如果我们用最笨重的方式去实现。
...
很明显,这个样子去实现一个路由的跳转是不明智的,我们要写的是一个可维护,易读性强的路由。
所以,这里写了一个用来遍历路由数组的方法。
//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: () => (
11111
)
})
return (
<LoadableComponent {…this.props} />
{renderRoutesMap(routes)}
)
}
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(RouterGuard))
**`componentWillMount`是`react`组件当中的生命周期,在渲染前调用,在这里,我们可以拿到`redux`当中的参数,也可以拿到通过路由带过来的参数。**
在这里,用的是authorization,如果authorization是true,就代表我没有登录,跳转到login登录页。
此外,还做了重定向的操作,比如在根路由的时候,要重定向跳转到另外一个地址。
其实这样就可以实现真正的路由拦截了,但是,这个还不够,我们不只要做拦截,我们还要做的是,除拦截以外,还要尽可能的加快渲染速度,提升用户体验。
这里,我有用到一个`react-loadable`路由懒加载的组件,作用就是**路由懒加载,加载具有动态导入组件的更高阶组件,提升用户体验。**
这里用到的`import`是不支持变量的,所以这里用的是**模版字符串**的方式,在每一次进入组件,并准备`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 = {} }) => (
<Switch {…switchProps}>
{renderRoutesMap(routes)}
)
export default renderRoutes
最后
小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始,原计划每天刷一道算法题,实际上每天有时候不止一题,一年最终完成了 600+:
凭借三年刷题经验,他在校招中很快拿到了各大公司的offer。
入职前,他把他的刷题经验总结成1121页PDF书籍,作为礼物赠送给他的学弟学妹,希望同学们都能在最短时间内掌握校招常见的算法及解题思路。
整本书,我仔细看了一遍,作者非常细心地将常见核心算法题和汇总题拆分为4个章节。
而对于有时间的同学,作者还给出了他结合众多数据结构算法书籍,挑选出的一千多道题的解题思路和方法,以供有需要的同学慢慢研究。