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

1.react-router v3

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

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

例如：

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

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

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

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

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

<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文件去处理一些事件

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;

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中按需加载的写法，此处不做过多讲解。