React渲染前钩子函数

Question

用react + react-router做项目, 目前有两个页面: login和home
现在想做的效果是, 如果用户一开始就进home的url, 就停止渲染(不执行render函数), 并且将用户导向login页面
这个效果该怎么实现呢?
之前试过在home组件的componentWillMount中判断redux中是否有用户信息并且跳转, 但效果不是很好, render函数中如果有用到redux中不存在的数据, 依然会报错.
谢谢!~

github讨论: https://github.com/ReactTrain...

Answer 1

1、在componentWillMount的时候就判断是否有用户登录信息。然后跳转。
2、路由层面去控制

// router.js
import React from 'react'

function auth(app) {
    return async function (nextState, replace, callback) {
        // 判断是否登录，没有登录就去到登录页
        // 这样做还有一个好处，比如刷新页面的时候。我可以把用户信息拿到之后再进行渲染
        let userInfo = await request(`/api/getUserInfo`)
    }
}

export default function({app}) {
    return (
        <Router path="/home" component={Home} onEnter={auth(app)}> />
    )
}

Answer 2

楼上说的是对的，react-router的每个route都会暴露两个方法onEnter和onLeave。分别表示匹配并加载当前组件和离开当前组件。按照你的需求就是在onEnter方法里面获取token，如果有就进入home页，如果没有就通过histoy.push('/login')的方法让用户调到登录页。

Answer 3

目前(react-dom-router v4)的解决方案:

<Route path="/" render={(props)=>{return this.props.userInfo ? <Home {...props}/> : <Login {...props}/>}}/>

如果在redux中没有检测到userinfo的话就直接渲染到登录页面
这样做的话还有个好处, 就是logout操作时不需要手动跳回到登录页面, 直接清除用户数据即可, 路由会自动渲染到login页面.

Answer 4

进入home在componentWillMount判断用户是否登录
没有登录 hashHistory.push(首页)