reactjs - react router v4 redirecting to another page outside of component -

i have basic texting app want make , following tutorial on react , meteor problem tutorial using react-router v3 , want used react-router v4. how make equivalent of doing like:

browserhistory.replace("/chat"); 

i doing outside of component cannot do:

this.props.history.push("/chat"); 

i trying run function every time entering page, checks if user authenticated or not , page on. here code far:

main.js

import react "react"; import reactdom "react-dom"; import {meteor} "meteor/meteor"; import {tracker} "meteor/tracker"; import { browserrouter, route, switch, redirect, withrouter} 'react-router-dom'  import {texts} "./../imports/api/text"; import app "./../imports/ui/app"; import name "./../imports/ui/name"; import notfound "./../imports/ui/notfound"; import signup "./../imports/ui/signup"; import login "./../imports/ui/login";  meteor.startup(() => {     tracker.autorun(() => {         let texts = texts.find().fetch();         let signedin = !!meteor.userid();         let onprivatepage = ["/chat"];         let onpublicpage = ["/signup", "/login"];         const isuserauthenticated = withrouter(({history}) => {             if(signedin && onpublicpage){                 console.log("signed in")             }             if(!signedin && onprivatepage){                 console.log("signed out")             }         });         const routes = (             <browserrouter>                 <switch>                     <app path="/chat" texts={texts} render={isuserauthenticated()}/>                     <signup path="/signup" render={isuserauthenticated()}/>                     <login path="/login" render={isuserauthenticated()}/>                     <route component={notfound}/>                 </switch>             </browserrouter>         );         reactdom.render(routes, document.getelementbyid("app"));     }); }); 

signup.js

import react "react" import {withrouter} "react-router-dom"; import {accounts} "meteor/accounts-base" import {link} "react-router-dom";  class signup extends react.component{     constructor(props){         super(props);         this.state = {             error: ""         }     }     signupuser(e){         e.preventdefault();         let username = this.refs.username.value;         let password = this.refs.password.value;          user = {             username,             password         };          accounts.createuser(user, (err) => {             if(err){                 this.setstate({                     error:err.reason                 })             }else{                 console.log("success")             }         });     }     render(){         return(             <div>                 <form onsubmit={this.signupuser.bind(this)}>                     <h1>register here</h1>                     {this.state.error}                     <br />                     <input type="username" ref="username" />                     <input type="password" ref="password" />                     <button>signup</button>                     <br />                     <link to="/login">i have account.</link>                 </form>             </div>          )     } } export default withrouter(signup); 

login.js

import react "react"; import {withrouter} "react-router-dom"; import {meteor} "meteor/meteor"; import {link} "react-router-dom";  class login extends react.component{     constructor(props){         super(props)         this.state = {             error:""         }     }     loginuser(e){         e.preventdefault()         let username = this.refs.username.value.trim();         let password = this.refs.password.value.trim();          meteor.loginwithpassword({username}, password, (err)=>{             if(err){                 this.setstate({                     error: err.reason                 })             }else{                 console.log("logged in")             }         });     }     render(){         return(             <div>                 <form onsubmit={this.loginuser.bind(this)}>                     <h1>login</h1>                     {this.state.error}                     <br />                     <input ref="username" type="text" placeholder="username" />                     <input ref="password" type="password" placeholder="password" />                     <button>login</button>                     <br />                     <link to="/signup">need account?</link>                 </form>              </div>         )     } }  export default withrouter(login); 

change isuserauthenticated code following:

const isuserauthenticated = withrouter(({history}) => {     if(signedin && onpublicpage){         console.log("signed in")     }     if(!signedin && onprivatepage){         console.log("signed out")     } }); 

so able history.push('/some-route/') when needed. don't forget add withrouter in import react-router-dom, this:

import { browserrouter, route, switch, redirect, withrouter } 'react-router-dom' 

as auth flow, checkout this auth example react router 4 docs. you!