react 利用路由钩子函数进行设置网页标题以及登录验证

1.react-router v3

react-router v3中提供的onEnter，onUpdate，onLeave等方法，贯穿于react生命周期。

可以利用这些钩子函数对路由跳转进行处理。

例如：

利用钩子函数，设置网页标题

[code]// 设置标题
const setTitle = (title) => {
document.title = title;
}

[code]<Route path="user" onEnter={setTitle('后台管理系统')}/>

 利用钩子函数进行登录验证（由于现在使用的是4.0，所以，该方法没有验证，先记录一下）

[code]// 登录验证
const requireAuth = (nextState, replace) => {
let user = JSON.parse(sessionStorage.getItem('user'));
if(!user) { // 未登录
replace({
pathname: '/login',
state: { nextPathname: nextState.location.pathname }
});
}
}

[code]<Route path="user" onEnter={requireAuth}/>

2.react-router v4

react-router v4，舍弃了onEnter，onUpdate，onLeave，它使用componentDidMount或componentWillMount来代替onEnter，使用componentDidUpdate 或 componentWillUpdate来代替onUpdate，使用componentWillUnmount来代替onLeave。

例如：

利用钩子函数，设置网页标题，和登录验证

这里，我们建一个bundle.js文件去处理一些事件

[code]import React, {Component} from 'react'

class Bundle extends Component {
state = {
// short for "module" but that's a keyword in js, so "mod"
mod: null,
};

componentWillMount() {
this.load(this.props)
this.setTitle(this.props.title);
}

componentWillReceiveProps(nextProps) {
if (nextProps.load !== this.props.load) {
this.load(nextProps)
this.setTitle(nextProps.title);
}
}

//设置标题
setTitle(title){
document.title = title || '后台管理系统';
}

load(props) {
this.setState({
mod: null
});
props.load((mod) => {
this.setState({
// handle both es imports and cjs
mod: mod.default ? mod.default : mod
})
})
}

render() {
return this.props.children(this.state.mod)
}
}

export default Bundle;

[code]import {Route, Switch,Redirect} from 'react-router-dom';
import Bundle from './bundle';
import User from 'bundle-loader?lazy&name=user!manager/system/user';
import EditUser from 'bundle-loader?lazy&name=user!manager/system/editUser';
import NotFound from 'bundle-loader?lazy&name=404!manager/404';
import Login from 'bundle-loader?lazy&name=login!manager/login';
const Loading = function () {
return <div>Loading...</div>
};

const createComponent = (component,title) => (props) => {
let isPass = false;//登录验证
if(props.location.pathname == '/login'){//若为登录
isPass = true;
}else{
let user = JSON.parse(sessionStorage.getItem('user'));
isPass = user?true:false;
}
if(isPass){
return (
<Bundle load={component} title={title}>
{
(Component) => {console.log(Component); return Component ? <Component {...props} /> : <Loading/>}
}
</Bundle>
);
}else{
return (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
);
}
}

const getRouter = () => (
<div>
<Switch>
<Route exact path="/" component={createComponent(User)}/>
<Route exact path="/login" component={createComponent(Login,'后台管理系统登录')}/>
<Route exact path="/system/user"  component={createComponent(User)}/>
<Route exact path="/system/editUser/:opt/:id?"  component={createComponent(EditUser)}/>
<Route path="*" component={createComponent(NotFound)}/>
</Switch>
</div>
);

export default getRouter;

link链接写在了其他地方，这里不做过多讲解。

上面引用的bundle-loader是react-router4中按需加载的写法，此处不做过多讲解。