reactjs - browserHistory not Moving to New Component in React -

i have strange authentication issue react.

when user logins, authentication prop set true. if user tries go route , authentication undefined or false push them login page.

currently looks this:

personid component

  componentwillmount() {     console.log("mounting person id component if authenticated true", this.props.authenticated)     if (!this.props.authenticated) {         browserhistory.push("/login");            }     }    render() {         if(this.props.user.type == "admin")  

the problem is, when this.props.authenticated = undefined, , when browser history pushes component login route, render method personid component still plays.

this not make sense. if push component route why still rendering personid component?

the way using should work, can 1 more thing, put same check inside render also, , return null, not render anything, this:

render() {        if (!this.props.authenticated) {           return null;       }       .... }