title: react router v4 redirecting to another page outside of component
body: <p>I have a basic texting app I want to make and am following a tutorial on react and meteor but the only problem is that the tutorial is using react-router v3 and I want to get used to react-router v4.  How would I make the equivalent of doing something like: </p>
  
  <pre><code>browserHistory.replace("/chat");
  </code></pre>
  
  <p>I also am doing it outside of a component so I cannot do:</p>
  
  <pre><code>this.props.history.push("/chat");
  </code></pre>
  
  <p>I am trying to run a function every time someone is entering a page, which checks if the user is authenticated or not and what page they are on.  Here is my code so far: </p>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>import React from "react";
  import ReactDOM from "react-dom";
  import {Meteor} from "meteor/meteor";
  import {Tracker} from "meteor/tracker";
  import { BrowserRouter, Route, Switch, Redirect, withRouter} from 'react-router-dom'
  
  import {Texts} from "./../imports/api/Text";
  import App from "./../imports/ui/App";
  import Name from "./../imports/ui/Name";
  import NotFound from "./../imports/ui/NotFound";
  import Signup from "./../imports/ui/Signup";
  import Login from "./../imports/ui/Login";
  
  Meteor.startup(() =&gt; {
      Tracker.autorun(() =&gt; {
          let texts = Texts.find().fetch();
          let signedIn = !!Meteor.userId();
          let onPrivatePage = ["/chat"];
          let onPublicPage = ["/signup", "/login"];
          const isUserAuthenticated = withRouter(({history}) =&gt; {
              if(signedIn &amp;&amp; onPublicPage){
                  console.log("Signed In")
              }
              if(!signedIn &amp;&amp; onPrivatePage){
                  console.log("Signed Out")
              }
          });
          const routes = (
              &lt;BrowserRouter&gt;
                  &lt;Switch&gt;
                      &lt;App path="/chat" texts={texts} render={isUserAuthenticated()}/&gt;
                      &lt;Signup path="/signup" render={isUserAuthenticated()}/&gt;
                      &lt;Login path="/login" render={isUserAuthenticated()}/&gt;
                      &lt;Route component={NotFound}/&gt;
                  &lt;/Switch&gt;
              &lt;/BrowserRouter&gt;
          );
          ReactDOM.render(routes, document.getElementById("app"));
      });
  });
  </code></pre>
  
  <p><strong>Signup.js</strong></p>
  
  <pre><code>import React from "react"
  import {withRouter} from "react-router-dom";
  import {Accounts} from "meteor/accounts-base"
  import {Link} from "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) =&gt; {
              if(err){
                  this.setState({
                      error:err.reason
                  })
              }else{
                  console.log("success")
              }
          });
      }
      render(){
          return(
              &lt;div&gt;
                  &lt;form onSubmit={this.SignupUser.bind(this)}&gt;
                      &lt;h1&gt;Register Here&lt;/h1&gt;
                      {this.state.error}
                      &lt;br /&gt;
                      &lt;input type="username" ref="username" /&gt;
                      &lt;input type="password" ref="password" /&gt;
                      &lt;button&gt;Signup&lt;/button&gt;
                      &lt;br /&gt;
                      &lt;Link to="/login"&gt;I already have an account.&lt;/Link&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
          )
      }
  }
  export default withRouter(Signup);
  </code></pre>
  
  <p><strong>Login.js</strong></p>
  
  <pre><code>import React from "react";
  import {withRouter} from "react-router-dom";
  import {Meteor} from "meteor/meteor";
  import {Link} from "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)=&gt;{
              if(err){
                  this.setState({
                      error: err.reason
                  })
              }else{
                  console.log("Logged in")
              }
          });
      }
      render(){
          return(
              &lt;div&gt;
                  &lt;form onSubmit={this.loginUser.bind(this)}&gt;
                      &lt;h1&gt;Login&lt;/h1&gt;
                      {this.state.error}
                      &lt;br /&gt;
                      &lt;input ref="username" type="text" placeholder="Username" /&gt;
                      &lt;input ref="password" type="password" placeholder="Password" /&gt;
                      &lt;button&gt;Login&lt;/button&gt;
                      &lt;br /&gt;
                      &lt;Link to="/signup"&gt;Need an account?&lt;/Link&gt;
                  &lt;/form&gt;
  
              &lt;/div&gt;
          )
      }
  }
  
  export default withRouter(Login);
  </code></pre>